Vue 百度地图baidu-map多点显示
安装baidu-map
$ npm install vue-baidu-map --save
引入main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
代码
我这是把它封装成了组件,也可以直接做成一个页面
<template>
<baidu-map class="map"
:center="center"
:zoom="zoom"
@click="pointSetClick"
:scroll-wheel-zoom="true"
@ready="handler">
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<bm-local-search :keyword="keyword"
zoom="12.8"
v-bind:auto-viewport="true"></bm-local-search>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<bm-marker v-for="(item,index) in mapObj"
:key="index"
:position="item"
:animation="draggingList[index]?'BMAP_ANIMATION_BOUNCE':''"
@click="showItem(index)">
<bm-label :content="item.title"
:labelStyle="{color: 'red', fontSize : '20px'}"
:offset="{width: -35, height: 30}" />
</bm-marker>
<bm-info-window :position="position"
:show="show"
@close="infoWindowClose"
@open="infoWindowOpen">
<div>地点: {{position.title}}</div>
</bm-info-window>
</baidu-map>
</template>
<script>
export default {
name: 'pointSetMap',
props: {
mapObj: Array,//结构[{ lng: '', lat: '',title:''}]
showMap: Boolean,
},
watch: {
showMap() {
this.center = ''
this.initMaker()
},
},
data() {
return {
draggingList: [],
position: { lng: '', lat: '',title:'' },
center: { lng: '', lat: '' },
zoom: 16,
show: false,
geoc: {},
map: {},
}
},
mounted() {},
methods: {
showItem(item) {
this.draggingList = []
this.draggingList[item] = true
this.position = this.mapObj[item]
this.show = true
},
infoWindowClose() {
this.show = false
},
infoWindowOpen() {
this.show = true
},
handler({ BMap, map }) {
var geoc = new BMap.Geocoder()
this.geoc = geoc
map = new BMap.Map('dituContent')
this.map = map
},
//初始化,每次定位到第一个点的位置
initMaker() {
if (this.mapObj.length) {
this.draggingList[0] = true
this.center = this.mapObj[0]
}
this.zoom = 16
},
pointSetClick(e) {
this.geoc.getLocation(e.point, function (rs) {
var addComp = rs.addressComponents
console.log(rs)
console.log(
addComp.province +
'-' +
addComp.city +
'-' +
addComp.district +
'-' +
addComp.street +
'-' +
addComp.streetNumber
)
})
},
},
}
</script>
<style>
/* The container of BaiduMap must be set width & height. */
.map {
width: 768px;
height: 600px;
}
</style>
效果图
扩展
baidu-map组件