腾讯位置服务JavaScriptAPI 开发

亦凉 2023-01-05 03:56 158阅读 0赞

###  ###

*  腾讯位置服务JavaScript入门篇
 *   *  第一个 Hello World
     *   *  1. 创建密钥
         *  2. 创建项目
     *  个性化地图
     *   *  1. 选择地图模板 & 绑定key
         *  2. 代码示例
     *  总结

# 腾讯位置服务JavaScript入门篇 #

> 注册链接：[https://lbs.qq.com?lbs\_invite=SB2RFLS][https_lbs.qq.com_lbs_invite_SB2RFLS]  
> 官方文档：[https://lbs.qq.com/webApi][https_lbs.qq.com_webApi]

## 第一个 Hello World ##

### 1. 创建密钥 ###

*  [https://lbs.qq.com/dev/console/key/manage][https_lbs.qq.com_dev_console_key_manage]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 1]
 *  然后就会生成一串密钥，保存下来，后面会用到  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 2]
 *  然后我们进入key设置，可以看到默认已经有 `JavaScriptAPI`权限，我们不用做修改，后面大家如果需要进行其他的测试要到这里授予一下权限  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 3]
 *  我们可以看到免费配额挺高的，日常的测试实验还是没问题的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 4]

### 2. 创建项目 ###

*  创建项目，这里我使用的是 `HBuider`，大家可以使用其他软件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 5]
 *  `index.html`
    
    > JavaScript API 解释
    > 
    >  *  https://map.qq.com/api/gljs：API库地址
    >  *  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>
            
            <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>
        
        <body onload="initMap()">
            
            <div id="container"></div>
        </body>
        </html>
 *  我们运行一下，可以看到地图已经显示出来了![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 6]

## 个性化地图 ##

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

*  [https://lbs.qq.com/dev/console/custom/mapStyle][https_lbs.qq.com_dev_console_custom_mapStyle]
 *  这里我就选择`墨渊`配色，然后点击 `直接使用`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 7]
 *  然后绑定我们刚才创建密钥，并设置应用类型即可  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 8]
 *  然后我们就可以看到创建好的模板，这里的 `style1`就是模板  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 9]

### 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，则会提示错误，并用地图默认样式显示）
            });
        }
 *  运行代码，可以看到地图风格已经变成了我们刚才选择的 `墨渊` 配色  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 10][]

## 总结 ##

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

> 注册链接：[https://lbs.qq.com?lbs\_invite=SB2RFLS][https_lbs.qq.com_lbs_invite_SB2RFLS]

[https_lbs.qq.com_lbs_invite_SB2RFLS]: https://lbs.qq.com?lbs_invite=SB2RFLS
[https_lbs.qq.com_webApi]: https://lbs.qq.com/webApi
[https_lbs.qq.com_dev_console_key_manage]: https://lbs.qq.com/dev/console/key/manage
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70]: /images/20221119/d7199d6a8f3148ac97293127154cc802.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210111153640199.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021011115373210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210111153853346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210111154016725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210111153304377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210111154811906.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[https_lbs.qq.com_dev_console_custom_mapStyle]: https://lbs.qq.com/dev/console/custom/mapStyle
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210111155839515.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210111155807658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210111160110420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210111160514679.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70