一、准备工作
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' // 必填
});
效果展示