微信小程序中使用地图

微信小程序中使用基于WebService的地图API有需要的使用限制，本文主要记录这些配置的过程。可以参考官方文档，但里面有些不够详尽的地方，在本文中有详细阐述。

新建地图服务应用

登录腾讯位置服务平台，点击左侧应用管理-我的应用，然后，点击右侧【创建应用】，参考下图：

需要选择WebServiceAPi选项，并选择域名白名单模式，将servicewechat.com添加到白名单，否则无法访问，同时勾选微信小程序选项，添加自己微信小程序的APP ID。

位置服务认证KEY

新建应用后，系统会发放一个使用位置服务时认证的KEY，在小程序中需要使用该KEY，才能成功调用位置服务API，参考下图：

小程序后台设置

登录小程序后台，点击左侧菜单【开发】-【开发管理】，然后点击右侧【开发设置】选项卡，设置服务器域名，将https://apis.map.qq.com添加到【request合法域名】，参考下图：

小程序中调用服务API

首先，下载位置服务JavaScriptSDK v1.2(下载链接)，解压后放到小程序工程目录，具体目录根据项目结构自行选择。

使用示例：

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({onLoad: function () {// 实例化API核心类qqmapsdk = new QQMapWX({key: '认证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);}});}
})

具体的API可以参考官方文档。

微信小程序中使用地图相关推荐

在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能前言首先查看效果一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
微信小程序中实现地图导航
<map id="map" longitude="116.715790" latitude="23.362490" markers=& ...
微信小程序中进行地图导航
前段时间一直都在做小程序做了两个月了,其中对于小程序还是有很不理解的地方看着一些大企业的小程序自己模仿其实还是有一些难度的,我觉得学习小程序看一遍文档是不够的我们要做的是看别人的例子对着文档一一对照! ...
微信小程序中Map地图组件的使用
常用功能一:绘制地图标记点一个或多个 map.wxml <!-- longitude 经度 latitude 纬度 scale 缩放层级最小5,最大18 markers 地图标记 bindma ...
微信小程序-路线规划,地图导航功能基于高德地图API
主要实现微信小程序中的地图路线规划和地图导航功能小程序二维码: 更新 2018年4月18日:新增限行限号查询. 2018年5月7日:新增快递查询,模板消息发送. 准备 1.在http://lbs.a ...
微信小程序自带地图_微信小程序开发之之地图功能（map）
本文将带你了解微信小程序开发之之地图功能(map),希望本文对大家学微信有所帮助. 主要介绍微信小程序中的地图模块相关功能.基本使用地图组件使用起来也很简单..wxml 1212参数列表及说明如下:除 ...
uni-app 中微信小程序使用高德地图等第三方 SDK的方法
获取SDK 首先在高德开放平台,注册账号并且申请相关的 key 等信息: 然后下载它的微信小程序版 SDK:微信小程序 SDK 然后填写app包名,申请原生sdk的appkey信息,但不需要下载原生s ...
微信小程序中自定义导航和地图定位
在健康码中,主要的难点技术就是在小程序中定位.自定顶部导航. 自定义导航在微信小程序中,默认的顶部导航不能设置图片背景或者是透明背景,只能自定义导航. 在每一个页面中引入,就是得到自己定义[个性化的 ...
微信小程序中开发使用腾讯地图定位
在最近的微信小程序中开发使用到腾讯地图定位,开发记录一下相关的情况.首先地图使用的是腾讯地图接口,https://lbs.qq.com/ 上去注册,注册了后去创建APPID和应用名; 注意创建了应用后 ...
小程序 | 微信小程序中使用位置API打开地图
小程序 | 微信小程序中使用位置API打开地图一.效果展示二.代码实现使用微信内置地图查看位置,调用wx.openLocationAPI,具体内容可以查看微信官方文档. // js let In ...

微信小程序中使用地图

目录

微信小程序中使用地图

新建地图服务应用

位置服务认证KEY

小程序后台设置

小程序中调用服务API

微信小程序中使用地图相关推荐

最新文章

热门文章