1、安装Vue Baidu Map
npm install vue-baidu-map --save
2、下载码云项目,地址:https://github.com/sy-zy/VueBMapInfoWindow
3、把下载的项目中src/components/infoWinfow文件夹复制到自己的公共组件文件夹components里面
4、vue中使用infoWindow组件
<template>
<div class="home">
<infoWindow
:map="map"
:markers="markers"
@on-change="change">
<h1>{{content}}</h1>
</infoWindow>
</div>
</template>
<script>
import infoWindow from '@/components/infoWindow/infoWindow.vue'
export default {
name: 'home',
components: {
infoWindow,
},
data() {
return {
// 地图配置
map: {
ak: '百度地图浏览器端AK秘钥',
center: {
lng: '112.97935279',
lat: '28.21347823',
},
zoom: 12,
width: '100%',
height: '100%',
},
// 地图标记点
markers:[
{
lng: '112.685238',
lat: '28.136284',
value: '信息窗口1'
},
{
lng: '112.958309',
lat: '28.214387',
value: '信息窗口2'
},
],
content: '',
};
},
methods: {
// 切换标记点 marker当前标记点对象
change (marker) {
this.content = marker.value;
console.log(marker.value);
}
},
}
</script>