本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示。
微信小程序目前支持百度地图、高德地图、腾讯地图。用法可以说是基本完全一样,本文章以高德为例,简单说一下他们的区别,高德地图精度应该是最准确的,毕竟本来就是做地图出生的。百度地图的精度目前较高德而言,还是要稍稍欠缺一点,但是他的附近商家那些要比高德好一点。而关于腾讯地图,暂时来说还是只能表示呵呵,希望越来越好吧。
1.既然本章是介绍微信小程序如何使用高德地图API,那么第一件事肯定是进入高德地图开放平台(/)。此处需要注册,登录。
2.完成登陆后,进入控制台,在左边侧边栏里点击 应用管理-我的应用- 创建新应用,会生成一个key,这个key在后面将会用到。记住绑定服务选择 微信小程序
3.登录微信开发者平台,在服务器域名设置里将高德地图的域名设置好
4.在你的项目中新建一个目录libs,将amap-wx.js文件放入此目录里(amap-wx.js下载地址:/api/wx/download,解压出来会有两个文件,此处只需要一个),结果如下:
5.在libs目录下创建配置文件config.js,写入第二步获取的key,例如
高德api配置到这儿就结束了,以下是我调用高德实现定位的demo
JS部分:var amapFile = require('../../libs/amap-wx.js'); //引入高德jsvar config = require('../../libs/config.js'); //引用我们的配置文件Page({ data: { markers: [], latitude: '', longitude: '', textData: {} }, onLoad: function () { var that = this; var key = config.Config.key; var myAmapFun = new amapFile.AMapWX({ key: key }); myAmapFun.getRegeo({ iconPath: "../../img/marker.png", iconWidth: 22, iconHeight: 32, success: function (data) { console.log(data); var marker = [{ id: data[0].id, latitude: data[0].latitude, longitude: data[0].longitude, iconPath: data[0].iconPath, width: data[0].width, height: data[0].height }] that.setData({ markers: marker }); that.setData({ latitude: data[0].latitude }); that.setData({ longitude: data[0].longitude }); that.setData({ textData: { name: data[0].name, desc: data[0].desc } }) }, fail: function (info) { // wx.showModal({title:info.errMsg}) } }) }})
WXML部分:view class="map_container" map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}"/map /viewview class="map_text" text class="h1"{{textData.name}}/text text{{textData.desc}}/text/view
WXSS部分:.map_container{ position: absolute; top: 0; bottom: 80px; left: 0; right: 0;}.map{ width: 100%; height: 100%;}.map_text{ position: absolute; left: 0; right: 0; bottom: 0px; height: 80px; background: #fff; padding: 0 15px;}text{ margin: 5px 0; display: block; font-size:12px;}.h1{ margin: 15px 0; font-size:15px;}
此页面大概长这样:
PS:
高德地图官方开发指南地址 /api/wx/guide/create-project/config-project
我的小程序demo地址 /Yxiaogg/vioShop(star star star)
如果觉得《right 微信小程序_微信小程序高德地图API》对你有帮助,请点赞、收藏,并留下你的观点哦!