小程序调用腾讯地图以及跳转到微信自带的图页面

在小程序中使用map组件渲染出腾讯地图

  1.申请腾讯地图的密匙 (申请密匙时要勾上webservice,为了后面的验证)

  2.下载腾讯地图的JavaScriptSDK并引入到小程序里面 

  3.添加小程序的有效域名https://apis.map.qq.com

然后在需要用到地图的页面引入JavaScriptSDK 如下图

小程序调用腾讯地图以及跳转到微信自带的图页面_第1张图片

实例化一下地图

小程序调用腾讯地图以及跳转到微信自带的图页面_第2张图片

key后面填的是你申请的密匙

然后在需要的地方调用下面的函数

小程序调用腾讯地图以及跳转到微信自带的图页面_第3张图片

其中link_adress为后台传过来的地址名称 通过腾讯地图的地址解析方法获取到该地址的经纬度 就是图中的res.result 然后将这个经纬度作为地图的中心点渲染地图map组件的代码下图所示

小程序调用腾讯地图以及跳转到微信自带的图页面_第4张图片

 然后markers是显示标记

 效果图如下:

 

小程序调用腾讯地图以及跳转到微信自带的图页面_第5张图片

然后点击图片跳转到微信自带的地图 先给map一个点击事件

小程序调用腾讯地图以及跳转到微信自带的图页面_第6张图片

通过wx.openLocation直接将获取的地址传过去 微信就会自动打开地图了 name参数是这个地址的名称

你可能感兴趣的:(小程序调用腾讯地图以及跳转到微信自带的图页面)