地图初始化参考下面这篇文章
地图初始化
data() {
return {
map: null,
markerLayer: null, //地点图层
coordinate: [ //地点经纬度坐标
{ x: 117, y: 37, name: "a" },
{ x: 118, y: 38, name: "b" },
{ x: 117.5, y: 37.5, name: "c" },
{ x: 116.5, y: 36.5, name: "d" },
{ x: 118, y: 37.5, name: "e" },
{ x: 117.5, y: 38, name: "f" }],
}
},
//图标图层添加到这张地图上
this.markerLayer = new maptalks.VectorLayer('vector').addTo(this.map);
this.toolLayer = new maptalks.VectorLayer('mapvector');
// 图标以及点击事件
this.coordinate.forEach((item) => {
var marker = new maptalks.Marker([item.x, item.y], {
symbol: {
markerType: 'square',
markerWidth: 10,
markerHeight: 10,
markerDx: 0,
markerDy: 0,
// markerOpacity: 0.1,
markerFill: '#00BBFF', //内部填充色
markerLineColor: 'red', //边框颜色
'textName': item.name,
'textFill': '#34495e',
'textHorizontalAlignment': 'right',
'textSize': 40,
textDx: 10
}
})
//将图标添加到图标图层
marker.addTo(this.markerLayer)
marker.on('click', function (e) {
// 具体点击执行逻辑
// 开始
marker.setInfoWindow({
'title': 'Marker\'s InfoWindow',
'content': `<div> x:${e.coordinate.x}<br>y:${e.coordinate.y}<br>点名称:${item.name}</div>`
})
marker.openInfoWindow();
console.log(e.coordinate.x, e.coordinate.y, marker);
})
console.log(item.x);
});