Web开发地图页面

ゝ一纸荒年。 2024-03-26 15:31 21阅读 0赞

## **开通腾讯位置服务步骤** ##

因为要获取用户当前所在地址的信息，所以需要把定位坐标缓存成地址，恰好腾讯位置服务提供了这个功能。所以我们按照提示开通这个服务即可，该服务对开发者来说是免费的，所以我们可以放心使用。

**地址：**[**腾讯位置服务 - 立足生态，连接未来 (qq.com)**][- _ _qq.com]

![9a96078da6864bc7aa516e5995cb69be.png][]

进行注册

![f79e1bf8e8e54099b46c2e166cc1348a.png][]

## **开通腾讯位置服务步骤** ##

点击控制台——> 应用管理——>我的应用——>创建应用

![3905ac2d9b9f4f0995f343691944bef7.png][]

填写key名称和描述

![fe9d6bc65add46beb9e1c70dd6ba77d7.png][]

如果只需要使用定位功能，不需要对AppKey做额外设置

![fd7a050af731477293475ca6cb050d14.png][]

**创建个web项目**

复制下面代码进行运行

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>GPS</title>
        <style type="text/css">
        #container{
            /*地图(容器)显示大小*/
            width:100%;
            height:100%;
        }
        </style>
        
        <script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></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>

### **加载Javascript API GL** ###

通过引入script标签加载API服务

其中：[https://map.qq.com/api/gljs][https_map.qq.com_api_gljs] 为API库地址，其参数包括

**key**：你的开发key，可在 [控制台 -> 应用管理 -> 我的应用][-_ _ -_] 界面进行创建得到

![3ca988b35fd048a589f9583ab4a99967.png][]

**v** ：代表引用的版本号

**异步加载API**

![779d686b7e984649a851a02450b67a46.png][]

function loadScript() {
         var script = document.createElement("script");
         script.type = "text/javascript";
         script.src = "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=initMap";
         document.body.appendChild(script);
    }
      
    window.onload = loadScript;

![37bceaffe7f1449d8cf6858cce4d106b.png][]

[- _ _qq.com]: https://lbs.qq.com/
[9a96078da6864bc7aa516e5995cb69be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/348d6cac28f844d8a2fab2113aebe54d.png
[f79e1bf8e8e54099b46c2e166cc1348a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1ddb71d63a304b0dbb0636e5a1aa0e72.png
[3905ac2d9b9f4f0995f343691944bef7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/85bcf98fe7ea4e9496d1cc905d1570c1.png
[fe9d6bc65add46beb9e1c70dd6ba77d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/dee3729c2a1e4e3ba82d56d7a1ddf540.png
[fd7a050af731477293475ca6cb050d14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/11825d1764cc45da8811f2cad14f965c.png
[https_map.qq.com_api_gljs]: https://map.qq.com/api/gljs
[-_ _ -_]: https://lbs.qq.com/dev/console/application/mine
[3ca988b35fd048a589f9583ab4a99967.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c4404a7766bf48e9b82ed33f782abf9e.png
[779d686b7e984649a851a02450b67a46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4ee13b9c590141dbb045af77a004640b.png
[37bceaffe7f1449d8cf6858cce4d106b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d894a4950cd147668440a1822218e7de.png