Web开发地图页面

白鱼塘

已于 2023-03-06 09:02:16 修改

阅读量395

点赞数 1

分类专栏：小玩意儿文章标签：腾讯定位 Powered by 金山文档

于 2023-02-28 19:35:29 首次发布

本文链接：https://blog.csdn.net/qq_55629923/article/details/129261919

版权

小玩意儿专栏收录该内容

5 篇文章 2 订阅

订阅专栏

文章介绍了开通腾讯位置服务的步骤，包括在控制台创建应用并获取AppKey，以及使用示例代码展示如何在Web项目中集成腾讯地图API进行地图初始化和定位功能的实现。此服务对开发者免费，适合需要获取用户位置信息的应用场景。

摘要由CSDN通过智能技术生成

开通腾讯位置服务步骤

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

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

进行注册

开通腾讯位置服务步骤

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

填写key名称和描述

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

创建个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>
    <!--引入Javascript API GL，参数说明参见下文-->
    <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>
<!-- 页面载入后，调用init函数 -->
<body onload="initMap()">
    <!-- 定义地图显示容器 -->
    <div id="container"></div>
</body>
</html>

加载Javascript API GL

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

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=YOUR_KEY"></script>

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

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

v ：代表引用的版本号

异步加载API

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;