电子商务网站功能模块,72建站网,二级域名申请入口,广州公司搜索seo网络推广allMarkers效果图 废话少说直接上马#xff08;最后是我遇到的问题#xff09;
cover-view是气泡弹窗#xff0c;可以自定义弹窗#xff0c;要配合js#xff1a;customCallout#xff0c;如果是非自定义的话#xff1a;callout#xff08;可以修改颜色、边框宽度、圆角…allMarkers效果图 废话少说直接上马最后是我遇到的问题
cover-view是气泡弹窗可以自定义弹窗要配合jscustomCallout如果是非自定义的话callout可以修改颜色、边框宽度、圆角、边距等有些属性我没加还是看官方文档虽然写的。。
!--index.wxml--
view classpage-section page-section-gapmap idmyMap stylewidth: 100%; height: 450px; latitude{{latitude}} longitude{{longitude}} bindmarkertapmarkertap bindcallouttapcallouttap bindlabeltaplabeltap markers{{markers}} scale16 polyline{{polyline}}cover-view slotcalloutblock wx:for{{customCalloutMarkerIds}} wx:key*thiscover-view classcustomCallout marker-id{{item}}!-- cover-image classicon src../img/point.png/cover-image --cover-view classcontentview stylebackground-color: #fff;view设备名称/viewview设备名称/viewview设备名称/view/view/cover-view/cover-view/block/cover-view/mapbutton bindtapaddMarker classpage-body-button typeprimary添加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.我没写但是我感觉自定义气泡是可以加点击事件的
