微信小程序 map地图（轨迹）

allMarkers效果图

 

废话少说直接上马（最后是我遇到的问题）

cover-view是气泡弹窗，可以自定义弹窗，要配合js：customCallout，如果是非自定义的话：callout（可以修改颜色、边框宽度、圆角、边距等）有些属性我没加，还是看官方文档（虽然写的。。）

<!--index.wxml-->
<view class="page-section page-section-gap"><map id="myMap" style="width: 100%; height: 450px;" latitude="{{latitude}}" longitude="{{longitude}}" bindmarkertap="markertap" bindcallouttap="callouttap" bindlabeltap="labeltap" markers="{{markers}}" scale="16" polyline="{{polyline}}"><cover-view slot="callout"><block wx:for="{{customCalloutMarkerIds}}" wx:key="*this"><cover-view class="customCallout" marker-id="{{item}}"><!-- <cover-image class="icon" src="../img/point.png"></cover-image> --><cover-view class="content"><view style="background-color: #fff;"><view>设备名称</view><view>设备名称</view><view>设备名称</view></view></cover-view></cover-view></block></cover-view></map><button bindtap="addMarker" class="page-body-button" type="primary">添加marker</button>
</view>

字段说明：

allMarkers：模拟位置点

markers：地图显示位置点

polyline：地图点连线位置点

mapCtx：初始化地图

 customCallout：气泡自定义使用（建议使用方法）

callout：气泡简易使用

const normalCallout = {id: 1,latitude: 23.098994,longitude: 113.322520,iconPath: '../img/point.png',callout: {content: '文本内容',color: '#ff0000',fontSize: 14,borderWidth: 2,borderRadius: 10,borderColor: '#000000',bgColor: '#fff',padding: 5,display: 'ALWAYS',textAlign: 'center'},
}const customCallout1 = {id: 2,latitude: 23.097994,longitude: 113.323520,iconPath: '../img/point.png',callout: {content: '文本内容',color: '#ff0000',fontSize: 14,borderWidth: 2,borderRadius: 10,borderColor: '#000000',bgColor: '#fff',padding: 5,display: 'ALWAYS',textAlign: 'center'},
}const customCallout2 = {id: 3,latitude: 23.096994,longitude: 113.324520,iconPath: '../img/point.png',customCallout: {anchorY: 10,anchorX: 0,display: 'ALWAYS',},
}const customCallout3 = {id: 4,latitude: 23.095994,longitude: 113.325520,iconPath: '../img/point.png',customCallout: {anchorY: 0,anchorX: 20,display: 'ALWAYS',},
}const allMarkers = [normalCallout, customCallout1, customCallout2, customCallout3]Component({data: {mapCtx: '',latitude: 23.098994,longitude: 113.322520,customCalloutMarkerIds: '',markers: [],polyline: []},onReady: function (e) {// 使用 wx.createMapContext 获取 map 上下文this.mapCtx = wx.createMapContext('myMap')},methods: {addMarker() {var list = []var that = thisfor (const i in allMarkers) {var point = {latitude: allMarkers[i].latitude,longitude: allMarkers[i].longitude}list.push(point)}console.log(this.data.polyline.points)this.setData({polyline:[{points: list,color: '#58c16c',width: 6,borderColor: '#2f693c',borderWidth: 1,arrowLine: true}],markers: allMarkers,customCalloutMarkerIds: [2, 3, 4],})},},
})

xml和js直接复制就可以运行了没有其他配置

所遇到问题：

1.初始化时我在data直接给markers和polyline赋值了，导致不能显示气泡，解决是加了一个按钮等map初始化结束在添加点就正常了

2.marker-id必须是number

3.我没写，但是我感觉自定义气泡是可以加点击事件的