vue、小程序腾讯地图开放平台使用

一、登录账号

腾讯地图API 官方文档：腾讯位置服务 - 立足生态，连接未来

二、申请秘钥 key

从首页【开发文档】-【微信小程序 SDK】进到微信小程序的开发文档：微信小程序JavaScript SDK | 腾讯位置服务

然后我们根据【Hello World】的提示，按照步骤进行：

1、创建应用

进到【我的应用】界面：腾讯位置服务 - 立足生态，连接未来

然后选择创建应用，输入应用名称、选择应用类型，完成点击【创建】。

2、添加 key

创建成功后会在应用列表生成一个新的应用，然后点击【添加 key】，配置相关信息，其中 key 名称可以用【应用名称+平台】来作为 key 名称，启用产品全部勾上。

如果是微信小程序开发，需要填写自己的 AppId，最后完成 key 的添加。

3.1、 vue中使用腾讯地图

通过引入script标签加载API服务，在根目录public/index.html的head里面添加下面代码：

    <script src="https://map.qq.com/api/gljs?v=1.exp&key=刚刚申请的key"></script>

然后封装你的地图组件

<template>
  <div id="map"></div>
</template>

<script>
export default {
  name: "Map",
  data() {
    return {
        
    };
  },
  mounted() {
    this.loadScript();
  },
  methods: {
    loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://map.qq.com/api/gljs?v=1.exp&key=YOUR_API_KEY&callback=initMap"; // 请替换 YOUR_API_KEY 为实际的密钥
      document.body.appendChild(script);

      // 设置全局的 initMap 回调函数
      window.initMap = () => {
        this.initMap();
      };
    },
    initMap() {
      //定义地图中心点坐标
      var center = new TMap.LatLng(39.98412, 116.307484);
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new TMap.Map(document.getElementById("map"), {
        center: center, //设置地图中心点坐标
        zoom: 17.2, //设置地图缩放级别
        pitch: 43.5, //设置俯仰角
        rotation: 45, //设置地图旋转角度
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>

注意：在使用这个组件的时候需要给这个组件设置一个宽高，这个根据自己项目情况来。

到这一步vue中就已经能使用腾讯地图了，其他操作可参考官网的参数进行修改。

3.2、小程序中使用

（1）下载小程序 SDK

下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

下载成功后，将其中xx.min.js文件拷贝到项目的utils目录中。

（2）配置安全域名

在微信公众平台中，将腾讯地图的域名 https://apis.map.qq.com 添加为当前小程序中的合法域名。

（3）小程序中使用腾讯地图

// pages/map/map.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({
    onLoad: function (options) {
        // 创建腾讯地图实例对象
        qqmapsdk = new QQMapWX({
            key: '你申请的key'
        })
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '****',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
            complete: function (res) {
                console.log(res);
            }
        });
    },
})

到这一步就能正常使用腾讯地图了

注意：小程序开发工具上的定位无法准确定位当前，只有在手机上真机调试或者预览的时候才能定位到当前位置。

秒客网