腾讯位置服务开发入门

1. 注册
点击腾讯位置服务官方网站，点击右上角的注册按钮，进入注册页面，输入登录信息等等……，注册成功后登录控制台。

2. 创建密钥

选择左侧的key管理，点击创建新密钥，

输入kye名称和验证码提交，成功后，弹出成功提示，

进入key设置，显示详细的key设置界面，选择需要的服务，

请牢记生成的密匙，代码程序中会用到，这是访问腾讯服务的验证码。

3. 代码说明

页面加载时，引用腾讯位置服务：

script.src = "https://map.qq.com/api/gljs?v=1.exp&key=QJABZ-OF2WP-6B7D7-L7CGJ-QJZ53-LZBGS&libraries=tools&callback=initMap";

关键字key后面的值就是你在腾讯位置服务中创建的密钥，如果没有密钥是无法使用腾讯位置服务的；libraries表示会引用的工具库，当然，也可以引用多个工具库，以逗号分隔；callback表示加载后调用的方法名。

设置显示地图的中心点：

 var center = new TMap.LatLng(41.80000, 123.38333);

通常情况下，应该获得自己的定位，以自己为中心点显示，该功能可以参考腾讯位置服务的webservice定位功能。

设置地图显示样式：

var map = new TMap.Map("container", {
                 pitch: 45,
                 zoom: 12,
                 center: center,
                 viewMode: '2D'
             });

viewMode：可以设置显示的是2D模式或者三维模式。

测量工具引用：

 measureTool = new TMap.tools.MeasureTool({
                 map: map
             });

将测量工具和地图关联即可。

4.完整代码
JS代码：

<script type="text/javascript">
         var map, measureTool;
         function initMap() {
             var center = new TMap.LatLng(41.80000, 123.38333);
             var map = new TMap.Map("container", {
                 pitch: 45,
                 zoom: 12,
                 center: center,
                 viewMode: '2D'
             });

             // 创建测量工具
             measureTool = new TMap.tools.MeasureTool({
                 map: map
             });
         }
         function loadScript() {
             //创建script标签，并设置src属性添加到body中
             var script = document.createElement("script");
             script.type = "text/javascript";
             script.src = "https://map.qq.com/api/gljs?v=1.exp&key=QJABZ-OF2WP-6B7D7-L7CGJ-QJZ53-LZBGS&libraries=tools&callback=initMap";
             document.body.appendChild(script);
         }

         function measureDis() {
             document.getElementById('measure').innerText = '点击这里测量结束';
             measureTool.measureDistance().then((res) => {
                 //测量结束，将结果显示到页中
                 alert("测量结果为：" + res.totalDistance + "米");
                 document.getElementById('measure').innerText = '点击这里开始测量';
             });
         }

         window.onload = loadScript;
    </script>

HTML代码：

 <div class="navbar navbar-default">
        <div class="col-md-2 col-md-offset-5">
            <button type="button" class="btn btn-default mt-2" onclick="measureDis()" id="measure">点击测量</button> 
        </div>
    </div>

测试运行页面：

点击一个按钮开始测量地图上两个位置的距离，再点击一次结束测量。

5. 总结和建议
   腾讯位置服务为开发者提供了很丰富的功能，能够满足大多数的开发需求。当然，也有一些需要更加人性化的交互体验，比如：使用测量距离的工具时，结束测量时需要再一次点击按钮才可以，否则，测量显示的虚线一直跟着鼠标走，个人觉得，可以提供双击结束测量或自动跟随一个结束按钮，随时可以结束测量。

以上仅代表个人观点，如有失误纯属意外！！！

专属邀请链接：https://lbs.qq.com?lbs_invite=8R7RFL8