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);}});},
})

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