先把地图组件的官方文档放到微信小程序里。建议先查看官方文档。基础部分只简单说一下，主要是微信小程序“精准地图”开发中遇到的一些问题。 ，以及解决方案。

下面将根据《精准地图》开发过程中遇到的地图组件问题进行说明。 “精准地图”基本使用微信提供的地图二次开发能力，可以扫描下方二维码体验

p>

精准地图提供精准外卖地图、园区社区导航路线，并可手绘地图路线并分享。

精准地图

基本用法

<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;">map>

地图组件类似于视图等常用组件，但参数更多。具体参数的含义请参考官方文档。需要注意的是，地图组件的宽度和高度是由组件样式直接设置的。对于在外面应用一层view，通过控制外层view的宽高来控制map组件的宽高是不可行的。

如果是普通显示图，只需要注意参数列表中的必填项即可。对于更复杂的开发，您需要关注 、 和支持的事件。

初始定位及定位时机

使用地图组件时，需要 和 两个属性，分别代表中心点经度和中心点纬度。这是定位时要重点关注的属性。

由于小程序的定位是异步进行的，可能已经在小程序的首屏渲染，定位还没有成功，所以建议为 的两个属性设置默认值，并且可以将默认值设置为您更关心的区域。坐标。

位置时间可以选择：

onLoad(options){ let _this =this wx.getLocation({ type:'gcj02', altitude: true, //高精度定位 success: function(res) { // 设置坐标 _this.setData({ longitude: res.longitude, latitude: res.latitude }) }, fail:function(err){ } }) }

定位失败的原因一般是用户拒绝授权定位，那么在失败回调函数中应该做的是：

提醒用户开启授权->跳转到设置页面->查看授权是否开启->为真时调用定位（建议封装定位过程）。

如果用户还是拒绝授权，就不要走上面的流程（死循环），体验比停止服务还要糟糕。

个性化地图的使用

关于个性地图，腾讯地图有完整教程，我直接贴链接

地图上下文

地图上下文是地图组件的API。建议先熟悉一下。它提供的功能有：

我们在做二次开发的时候，大部分都需要用到这些API。使用这些 API 的前提是创建地图上下文。建议在页面中创建：

onReady() { this.mapCtx = wx.createMapContext('showMap') // showMap 为地图组件ID }, // 其他地方使用地图上下文 只需要使用 this.mapCtx 即可

地图控制开发

以上是一个简单的介绍。接下来微信小程序开发中地图分布，我们用它来实现常用的地图控件。地图组件的官方文档表明该组件的属性即将被废弃。推荐使用-view来实现，所以我们使用-view来开发地图控件。

<map id="showMap" longitude="{{longitude}}" latitude="{{latitude}}" show-location="true" enable-satellite="{{showSatellite}}"> <cover-view class='layers controll' bindtap='layers'> <cover-image src='../../static/icon/layers.png' class='ten_l'>cover-image> cover-view>

<cover-view class='position controll' bindtap='getLocation'> <cover-image src='../../static/icon/position.png' class='ten_l'>cover-image> cover-view> map>

1、移动后快速回原点（定位功能）

getLocation() { let _this = this // 获取定位 wx.getLocation({ type: 'gcj02', altitude: true, //高精度定位 success: function(res) { _this.setData({ longitude: res.longitude, latitude: res.latitude }) // 使用地图上下文，将地图视野中心移到定位点 _this.mapCtx.moveToLocation({ longitude: res.longitude, latitude: res.latitude, }) }, fail: function() { }, }) }

2、图层切换

这里的图层切换主要是指卫星图像图层的切换。

/** * 切换图层 */ layers() { this.setData({ showSatellite: !this.data.showSatellite }) }

3、包括所有点

思路：由于控件比较常用，所以先解析地图数据的时候把需要包含的点解析成数组，后面直接调用

上面的wxml部分没有这个控件的布局，可以参考上面两个控件

data: { includePoints:[], }, fullScreen(){ // 使用 地图上下文包含点 this.mapCtx.includePoints({ points:this.data.includePoints, padding:[40,40,40,40] }) }

关于上图“精准地图”地图编辑功能的开发，请查看

微信公众号