<map class="map-style" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale" :circles='circles' @labeltap="handleMarkerTap"></map>
return {
keyword:'',
latitude: 39.90469, // 地图中心的纬度
longitude: 116.40717, // 地图中心的经度
circles: [{ //画圆
latitude: 39.90469,
longitude: 116.40717,
color: '#3699FF23',
fillColor: "#3699FF23",
radius: 1000,
strokeWidth: 1
}],
markers: [{
id: 1,
latitude: 39.90560,
longitude: 116.40420,
name: 'Marker 1',
width: 30, // 设置标志点的宽度
height: 30, // 设置标志点的高度
label: {
content: '这是一个标志点',
color: '#FFFFFF',
bgColor: '#5677BA',
borderColor: '#FFFFFF',
padding: 5,
borderWidth: 1,
borderRadius: 5,
anchorX: -50, // 横向中心位置
anchorY: -50, // 上方位置
}
},
{
id: 2,
latitude: 39.90772,
longitude: 116.40714,
name: 'Marker 2',
width: 30, // 设置标志点的宽度
height: 30 // 设置标志点的高度
}
],
value: 30,
scale: 15
}
//样式随手写的
.map-style {
width: 100%;
height: 100vh;
}
latitude 属性为 地图中心的纬度
longitude 属性为 地图中心的经度
markers 属性为 地图位置标记点
scale 属性为 地图缩放大小
circles 属性为 地图的蓝色圈
@labeltap 属性为 地图标记点介绍文字触发事件
这里只是简单说明,想要了解更多留言我更新一下新的文章