html
<baidu-map class="map" :ak="ak" :center="center" :zoom="zoom" @ready="handler">
<!-- 标记 -->
<bm-marker v-for="marker of markers" :icon="{ url: mapIcon, size: { width: 52, height: 52 } }" :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>
</baidu-map>
JavaScript
<script>
import { BaiduMap } from 'vue-baidu-map'
// 自定义图标引入
import mapIconPath from "../../../assets/images/mapIcon.png"
export default {
components: {
BaiduMap
},
data() {
return {
// 地图
BMap: null,
ak: '申请的百度地图key',
// 地图中心点坐标
center: { lng: 0, lat: 0 },
// 地图缩放级别
zoom: 16,
// 自定义标记图标
mapIcon: mapIconPath,
// 存放标记的数组
markers: [],
// 信息窗口
infoWindow: {
info: {}
},
}
},
methods: {
/** 获取地图 —— 用于初始化地图 */
handler({ BMap, map }) {
console.log(BMap, map)
this.BMap = BMap;
this.map = map;
this.center.lng = 113.30552997040922
this.center.lat = 22.807159275942844
this.zoom = 17
// 添加一个标记
this.markers.push({
lng: 113.30552997040922,
lat: 22.807159275942844,
name: "地址信息",
showFlag: false
})
},
// 点击点坐标赋值
lookDetail(marker) {
marker.showFlag = true;
this.infoWindow.info = marker;
},
// 关闭弹窗
infoWindowClose(marker) {
marker.showFlag = false
},
// 打开弹窗
infoWindowOpen(marker) {
marker.showFlag = true
},
}
}
css 一定要给baidu-map宽度高度,不然不显示
注:本篇主要讲【baidu-map】的标记【bm-marker】和信息弹窗【bm-info-window】,关于【baidu-map】标签可以点击这里查看
bm-marker 标记
-
v-for="marker of markers"
(markers 为存放标记的数组) -
position
包含lng、lat,用于标记的显示位置 -
icon
url为图片路径,size为图片大小(可写可不写,写则为自定义,不写是百度自带的默认icon)
@ lookDetail 方法
点击该标记时将标记marker信息赋值给信息窗口,并显示该信息窗口
bm-info-window 信息窗口
-
title
窗口信息内容,一般与对应标记的name内容一致 -
position
窗口信息位置,一般与对应标记的位置一致 -
show
窗口信息是否显示,一般与对应标记的showFlag一致
@close="infoWindowClose(marker)
关闭信息窗口
@open="infoWindowOpen(marker)
打开信息窗口