【百度地圖二 - vue-baidu-map】bm-marker和bm-info-window實現打點和點詳情彈窗功能

1. 效果圖

2. 實現代碼：

2.1 template

<bm-marker  v-for="item of markers" :position="{lng: marker.lng, lat: marker.lat}" @click="lookDetail(marker)">
	<bm-info-window :title="infoWindow.info.name" :position="{lng: infoWindow.info.lng, lat: infoWindow.info.lat}"   :show="marker.showFlag" @close="infoWindowClose(marker)" @open="infoWindowOpen(marker)">
	</bm-info-window>
</bm-marker>

2.2 data

markers: [
	{
		lng: 87.52801179885864,
		lat: 44.15955126285553,
		name:'測試矛盾111',
		showFlag:false //flag放在每一條數據裏
	}，
	{
		lng: 82.56253054272383,
		lat: 42.63299560546875,
		name:'',
		showFlag:false
	}
],
infoWindow.info:{},

2.3 method

// 點擊點座標賦值
lookDetail(marker){
	marker.showFlag = true;
	this.infoWindow.info = marker;
},
// 關閉彈窗
infoWindowClose(marker) {
	marker.showFlag = false
},
// 打開彈窗
infoWindowOpen(marker) {
	marker.showFlag = true
},

3. 使用 <bm-label> 點位置添加標註

<bm-marker>
  <bm-label
    content="1"
    :labelStyle="{color: '#fff', fontSize : '12px',background:'rgba(0, 0, 0, 0)',borderColor:'rgba(0, 0, 0, 0)'}"
    :offset="{width: 4,height:2 }"
  />
</bm-marker>

4. 更改點圖標：添加icon即可

<bm-marker
  v-for="item of markers"
  :key="item.code"
  :position="{lng: item.lng, lat: item.lat}"
  @click="lookDetail(item)"
  :icon="{url: 'https://csdnimg.cn/pubfooter/images/gongan.png', size: {width: 32, height: 32}}"
>