VUE+百度地图+多点标记提示内容
不合适的地方欢迎指正
第一步下载第三方依赖包
npm install vue-baidu-map --save
全局注册or局部注册
// 全局注册
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key
ak: 'idWmyzB8EiHcR4gnhHjf8FS5RcbvdNqG'
})
// 局部注册
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
components: {
BaiduMap
}
}
疑似vue百度官方文档
链接: Vue Baidu Map.
废话不多说,直接上代码(我写的比较简单,不够的自行看官方)
<template>
<baidu-map
:center="center"
:zoom="zoom"
class="bm-view"
:scroll-wheel-zoom="true"
@ready="handler"
>
<bm-marker v-for="(item,index) in positionArr" :key="index" :position="item.markerPoint" :dragging="false" animation="BMAP_ANIMATION_BOUNCE" @click="infoWindowOpen(index)">
<bm-info-window
:show="item.show"
@close="infoWindowClose(index)"
@open="infoWindowOpen(index)"
>{{ item.name }}</bm-info-window>
</bm-marker>
</baidu-map>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
components: {
BaiduMap
},
data() {
return {
center: { lng: xxx, lat: xxx }, // 地图的中心
zoom: 15, // 缩放倍数
positionArr: [
{
name: 'xxx', // 弹框内容
show: false, // 控制是否展示
markerPoint: {
lng: xxx, lat: xxx // 你想要的标记地点 推荐用这个官方拾取器 http://api.map.baidu.com/lbsapi/getpoint/index.html
}
},
]
}
},
methods: {
handler({ BMap, map }) {
this.center.lng = xxx
this.center.lat = xxx
this.zoom = 15
},
infoWindowClose(index) {
this.positionArr[index].show = false
},
infoWindowOpen(index) {
this.positionArr[index].show = true
}
}
}
</script>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>
能力只限于此,不喜勿喷
打完收工