腾讯位置服务_腾讯位置服务账号-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_63026408/article/details/133789825

1：账号申请

账户申请链接：https://lbs.qq.com/service/webService/webServiceGuide/webServiceOverview

2：添加应用和key

添加应用链接：https://lbs.qq.com/dev/console/application/mine

1：创建应用

2：添加key

小程序的id：

微信小程序链接微信扫码登录：https://mp.weixin.qq.com/

3：使用

1：html文件使用

<!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:1200px;
        height:400px;
    }
    </style>
    <!--引入Javascript API GL，参数说明参见下文-->
    <script src="https://map.qq.com/api/gljs?v=1.exp&key=HQ2BZ-ZNVL3-RQC3S-OQUP4-VAMPV-DBBLX"></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>

2：.vue文件使用

1：在主文件入口dns引入

代码：

<script type="text/javascript" src="http://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
<script type="text/javascript" src="http://map.qq.com/api/gljs?v=1.exp&libraries=service&key=HQ2BZ-ZNVL3-RQC3S-OQUP4-VAMPV-DBBLX"></script>
<script type="text/javascript" src="http://map.qq.com/api/gljs?v=1.exp&key=HQ2BZ-ZNVL3-RQC3S-OQUP4-VAMPV-DBBLX"></script>

2：.vue文件的页面使用

代码html部分：

<template>
  <div>
    <div id="container" ref="container"></div>
  </div>
</template>

代码js部分：


export default {
  components: {
  },
  data () {
    return {
    };
  },
  created () {
  },
  mounted () {
    this.initMap();
  },
  methods:{
    initMap() {
      console.log(this.$refs.container)
      //定义地图中心点坐标 111.202972, 34.824371  
      //new window.TMap.LatLng()/new TMap.LatLng()
      let center = new TMap.LatLng(39.98412, 116.307484);
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      //new window.TMap.LatLng()/new TMap.LatLng
      let map = new TMap.Map(this.$refs.container, {
        center: center, //设置地图中心点坐标
        zoom: 17.2, //设置地图缩放级别
        pitch: 43.5, //设置俯仰角
        rotation: 45, //设置地图旋转角度
      });
    },
  }
}