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 = this
for (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文章来源:https://www.toymoban.com/news/detail-637756.html
3.我没写,但是我感觉自定义气泡是可以加点击事件的文章来源地址https://www.toymoban.com/news/detail-637756.html
到了这里,关于微信小程序 map地图(轨迹)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!