微信小程序平台开放的地图功能API

下⾯会针对⼩程序开放的API结合应⽤场景以及开发中的注意事项为⼤家⼀⼀分享wx.getLocation(OBJECT)获取当前的地理位置、速度。场景

⼏乎任何⼀个应⽤都要获取⽤户当前的位置，⼤家应该经常会看到⼀个提⽰xxx要获取你当前的位置 允许 不允许 ，这就是获取当前位置的安全验证提⽰。知道了我的位置就可以实现周边的饭店、学校、厕所、出租车等等⼀系列周边相关的场景。

注意 type参数，默认为 wgs84 返回 gps 坐标，gcj02 返回可⽤于wx.openLocation打开地图的腾讯坐标，默认参数wgs84是原⽣经纬度，建议参数写成gcj02。

wx.chooseLocation(OBJECT)打开地图选择位置场景

选择⼀个位置可以快速填写购物时的配送地址，选择另外⼀个位置去订外卖，⼀般在回家的路上提前订好，到家就正好可以吃了。出去旅游前我们要选择景点周边的住宿等等都离不开要选择另为⼀个位置的场景。效果

通过点击选择地图选择坐标

选择地图⽰例代码：

openmap: function () { var that = this; //获取当前位置 wx.getLocation({ type: 'gcj02',

success: function (res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed

var accuracy = res.accuracy } })

wx.chooseLocation({

success: function (res) { var latitude = res.latitude var longitude = res.longitude var speed = res.longitude var accuracy = res.accuracy that.setData({latitude: latitude}) that.setData({ longitude: longitude}) } }) }

注意 在选点时如果是通过拖动地图并且选中的是默认的第⼀条，则很有可能success回调中name字段为空，因为这样标的点不⼀定能对应到POI，列表中的⾮第⼀条内容则为以当前点的经纬度检索周边的poi，所以除第⼀条其它都是有名称的，⼤家在使⽤的时候需要注意⼀下。

POI（Point of Interest，兴趣点）。在地图表达中，⼀个POI可代表⼀栋⼤厦、⼀家商铺、⼀处景点等等wx.openLocation(OBJECT)使⽤微信内置地图查看位置场景

展⽰⼀个位置的场景⼤家应该经常见到，⽐如：美团、点评⾥的店铺详情页⾯都有个店铺地址，点击进⼊会看到地图上标记了⼀个位置点。效果类似下图。效果

代码⽰例:

wx.openLocation({ latitude :39.908683, longitude :116.377915, scale:18,

name:'天安门',

address:'北京市东城区外桥', complete:function(){

console.log('complete',arguments); }});

map组件

组件是⼩程序为开发者提供的基础组件，⽰例:, map组件包含以下四个功能性属性markers、polyline、circles、controls。下边对以上四个属性分别介绍。接⼝详细说明见⼩程序Map组件⽂档.map组件-markers在地图上显⽰位置点场景

相对上⾯的接⼝wx.openLocation(OBJECT)，此接⼝可以实现⼀个⾃定义的位置展⽰，⽽且也可以实现多个位置点同时显⽰到地图上。⽐如：周边的XXX在通过地图的形式展⽰。这⾥只说⼀个位置点，多点只是markers参数传⼊多个点。后⾯⽰例会涉及到，这⾥就不赘述了哈。

代码⽰例

注意 map的longitude、latitude中⼼点坐标要与markers的数据⼀致这样位置点才能标记到地图视野的中⼼。 map组件-polyline

画线，指定⼀系列坐标点，从数组第⼀项连线⾄最后⼀项。场景

轨迹绘制，运动轨迹分享，经验路线分享等相关路线的功能。效果

代码⽰例

注意 include-points属性是将所有的点展⽰到可视区域内，但是如果不设置中⼼点latitude、longitude会有不能展现到视野内的问题，开发时需要注意，include-points属性可以通过计算所有点的最⼤矩形左下经纬度&右上经纬度来设置，这样可以减⼩setData的数据。因为⼩程序setData的数据传输有1M的限制。map组件-circles场景

周边某范围内XXX的展⽰，外卖配送范围的展⽰，⽐如：周边1000⽶有没有厕所，这家饭店送餐的区域等。效果

代码⽰例

map组件-controls场景

主要实现地图内的交互场景，下⾯以回到当前位置为例，点击地图右下⽅的控件执⾏回到当前的位置。当然也可以换成酒店、餐饮、娱乐等。效果

⽰例代码

注意 在设置控件位置时要⽤wx.getSystemInfoSync()接⼝返回的逻辑宽windowWidth⾼windowHeight进⾏定位。控件点击处理函数中需要通过e.controlId对应控件设置的id进⾏区分处理。wx.createMapContext(mapId)

创建并返回 map 上下⽂ mapContext 对象，主要包括⽅法有getCenterLocation、moveToLocation，控件⽰例已经涉及到就举例说明了，请参见⼩程序wx.createMapContext(mapId) API⽂档

⼩程序地图应⽤⽰例

结合上述地图能⼒，分享⼀个找厕所的例⼦。需求

实现⼀个找厕所的功能，找周边1000⽶内的厕所。并把厕所的位置点标到地图上。点击位置点对应icon放⼤并且在地图下⽅显⽰相应的名称、地址信息。实现

主要分三个步骤：1. 获取当前位置

2. 通过检索服务搜索当前位置周边的厕所3. 在地图视野内标记所有位置点以及位置的交互

效果

代码⽰例

1. 获取当前位置

2. 通过检索服务搜索当前位置周边1000的厕所

3.在地图视野内标记所有位置点以及位置点的点击交互