微信小程序引入腾讯地图图解

一、准备工作

1.小程序 (qq.com)进入网址注册属于自己的小程序:

填写信息-登录邮箱激活-信息登记

2.完成后，就会进入这个页面

3.在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com

注意此处的开发者ID-小程序ID在下面注册地图key时要用到，我下面还会再次提醒

二、准备地图

1.登录腾讯位置服务网站腾讯位置服务 - 立足生态，连接未来 (qq.com)

2.注册完成后，点击控制台

3.点击应用管理-我的应用

4.点击创建应用，随意输入,点击创建就创建完成了，然后点击添加key

5.勾选webServiceAPI和微信小程序，填入需要的内容

6.下载微信小程序JavaScriptSDK，两个版本都可以

7.下载后引入qqmap-wx-jssdk.js文件到components文件夹中

8.创建微信小程序页面

在wxml页面

<map id="myMap"
   markers="{{markers}}"
   style="width:100%;height:800px;"
   longitude="116.313972"
   latitude="39.980014" scale='16'>
</map>

在js页面

// 引入SDK核心类
var QQMapWX = require('../../../components/qqmap-wx-jssdk');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: '你的key' // 必填
});

效果展示