腾讯位置服务JavaScriptAPI 开发

·  阅读 105
腾讯位置服务JavaScriptAPI 开发

「这是我参与11月更文挑战的第27天,活动详情查看:2021最后一次更文挑战

腾讯位置服务JavaScript入门篇

官方文档:lbs.qq.com/webApi

第一个 Hello World

1. 创建密钥

在这里插入图片描述 在这里插入图片描述

  • 然后就会生成一串密钥,保存下来,后面会用到

在这里插入图片描述

  • 然后我们进入key设置,可以看到默认已经有 JavaScriptAPI权限,我们不用做修改,后面大家如果需要进行其他的测试要到这里授予一下权限

在这里插入图片描述

  • 我们可以看到免费配额挺高的,日常的测试实验还是没问题的

在这里插入图片描述

2. 创建项目

  • 创建项目,这里我使用的是 HBuider,大家可以使用其他软件

在这里插入图片描述

  • index.html

    JavaScript API 解释

    • map.qq.com/api/gljs:AP…
    • v:代表版本号
    • key:上面创建的密钥,这里要将YOUR_KEY替换为自己刚才创建的密钥
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Hello world!</title>
        <style type="text/css">
        #container{
            /*地图(容器)显示大小*/
            width:100%;
            height:100%;
        }
        </style>
        <!--引入Javascript API GL-->
        <script src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>
        <script>
            //地图初始化函数,本例取名为init,开发者可根据实际情况定义
            function initMap() {
                //定义地图中心点坐标
                var center = new TMap.LatLng(39.984120, 116.307484)
                //定义map变量,调用 TMap.Map() 构造函数创建地图
                var map = new TMap.Map(document.getElementById('container'), {
                    center: center,//设置地图中心点坐标
                    zoom: 17.2,   //设置地图缩放级别
                    pitch: 43.5,  //设置俯仰角
                    rotation: 45    //设置地图旋转角度
                });
            }
        </script>
    </head>
    <!-- 页面载入后,调用init函数 -->
    <body onload="initMap()">
        <!-- 定义地图显示容器 -->
        <div id="container"></div>
    </body>
    </html>
    复制代码
  • 我们运行一下,可以看到地图已经显示出来了在这里插入图片描述

个性化地图

1. 选择地图模板 & 绑定key

在这里插入图片描述

  • 然后绑定我们刚才创建密钥,并设置应用类型即可

在这里插入图片描述

  • 然后我们就可以看到创建好的模板,这里的 style1就是模板

在这里插入图片描述

2. 代码示例

  • 将上面 index.html 中的 initMap() 函数代码替换如下

    注:mapStyleId 要改为自己的地图模板ID

    function initMap() {
        var center = new TMap.LatLng(39.984120, 116.307484)
        var map = new TMap.Map(document.getElementById('container'), {
            center: center,
            zoom: 17.2,
            mapStyleId: 'style1' //设置样式ID,本例中的key绑定的style1为经典地图样式
                                //(若使用未绑定的样式或无效ID,则会提示错误,并用地图默认样式显示)
        });
    }
    复制代码
  • 运行代码,可以看到地图风格已经变成了我们刚才选择的 墨渊 配色

总结

  • 之前我用过百度地图的API,现在又接触到了腾讯位置服务,感觉两个各有千秋吧,这篇文章呢只是小小的带大家体验了一下腾讯位置服务,更多的功能需要大家自己去探索。总的来说,腾讯位置服务API使用起来是比较方便的,里面的功能也是蛮多的,推荐大家体验一下

最后,欢迎大家关注我的个人微信公众号 『小小猿若尘』,获取更多IT技术、干货知识、热点资讯

分类:
后端
标签:
分类:
后端
标签:
收藏成功!
已添加到「」, 点击更改