微信小程序引入腾讯地图图解-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序引入腾讯地图图解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、准备工作

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' // 必填
});

效果展示

微信小程序接入腾讯地图,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-770122.html

到了这里，关于微信小程序引入腾讯地图图解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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