vue使用百度地图（vue-baidu-map）
何晗昱
一. 插件安装
npm i --save vue-baidu-map-v3
vue-baidu-map-v3使用的百度地图 JavaScript API v3.0
二. main.js全局引入
import BaiduMap from 'vue-baidu-map-v3'
Vue.use(BaiduMap, {
ak: '你的ak'
})
三. 基本使用
<template>
<div class="container">
<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler"></baidu-map>
</div>
</template>
<script>
export default {
data() {
return {
//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
center: {lng: 0, lat: 0},
zoom: 3,
map: null,
BMap: null
}
},
methods: {
//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
handler ({BMap, map}) {
this.map = map
this.BMap = BMap
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 15
}
}
}
</script>
<style>
.container {
width: 100%;
height: 100%;
}
.bm-view {
width: 100%;
height: 100%; //BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
}
</style>
四. 覆盖物 (点，海量点，折线，信息窗体)
<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
// 一个自定义图标的点
<bm-marker :position="markerPoint" :rotation="markerRotation" :icon="{url:require('@/assets/marker.png'),size:{width:60,height:28}}" />
//海量点--利用该类可同时在地图上展示万级别的点，目前仅适用于html5浏览器
<bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_CIRCLE" color="red" size="BMAP_POINT_SIZE_SMALL" @click="clickHandler"></bm-point-collection>
//无数条折线，每一条颜色都不一样
<bm-polyline
v-for="(item,id) in lineData"
:key="id+item.color"
:path="item.line"
:stroke-color="item.color"
:stroke-opacity="1"
:stroke-weight="5"
/>
// 信息窗体，说实话，百度地图的信息窗体样式真的很丑，动态切换显隐，偶尔还会出现内容不能完全展示的情况。
<bm-info-window
v-if="infoWindow.show" // 有时候show属性不好用，就用v-if控制他显示隐藏，
ref="infoWindow"
:position="infoWindow.postition"
:title="infoWindow.title"
:show="infoWindow.show"
:close-on-click="false"
:auto-pan="true"
@close="handleInfoWindowClose"
@open="handleInfoWindowOpen"
@clickclose="handleInfoWindowClickClose"
>
<div class="info-cont">
//定义你自己的信息窗体的内容。
</div>
</bm-info-window>
</baidu-map>
<script>
export default {
data() {
return {
//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
center: {lng: 0, lat: 0},
zoom: 3,
map: null,
BMap: null,
markerPoint: {lng: 116.404, lat: 39.915},
markerRotation: 0,
points: [], //Array[Point] 例[{lng: 116.404, lat: 39.915}, {lng: 117.404, lat: 40.915}]
lineData: [{
line: [{lng: 116.404, lat: 39.915}, {lng: 117.404, lat: 39.915}],
color: 'red'
}],
infoWindow: {
show: false,
position: {},
title: '',
}
}
},
methods: {
//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
handler ({BMap, map}) {
this.map = map
this.BMap = BMap
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 15
},
clickHandler(e) {
console.log(e)
},
handleInfoWindowOpen() {
this.diseaseWindow.show = true
},
handleInfoWindowClose() {
this.infoWindow.show = false
},
handleInfoWindowClickClose() {
this.diseaseWindow.show = false
this.diseaseWindow.position = {}
this.$refs.diseaseWindow.redraw()
},
}
}
</script>
五. 第三方组件库（点聚合）
<template>
<div class="container">
<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
<bml-marker-clusterer v-if="markers.length > 0" :average-center="true" :styles="styles">
<bm-marker
v-for="marker in markers"
:key="marker.name"
:position="{lat: marker.latitude, lng: marker.longitude}"
:rotation="marker.rotation"
:icon="{url: (marker.using ? require('@/assets/marker_on.png') : require('@/assets/marker_off.png')),size:{width:69,height:51}, opts: {imageSize: {width: 69,height: 51}}}"
:top="true"
@click="handleShow(marker)"
>
<bm-label
v-if="marker.markerKey === curMarker.markerKey"
:content="marker.name"
:label-style="{borderRadius: '10px', color: '#57a3f3', fontSize : '16px', fontWeight: 'bold', border: 'none', padding: '2px 10px', transform: 'translateX(-50%)'}"
:offset="{height: -20, width: 32}"
/>
</bm-marker>
</bml-marker-clusterer>
</baidu-map>
</div>
</template>
<script>
export default {
data() {
return {
//没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
//当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
center: {lng: 0, lat: 0},
zoom: 3,
map: null,
BMap: null,
markers: [{ // 根据后台返回数据定义
name: 'marker1',
latitude: 116.404,
longitude: 39.915,
rotation: 0,
using: false, // 根据此来显示不同的单个marker点的图标
}],
curMarker: {}
}
},
methods: {
//由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
handler ({BMap, map}) {
this.map = map
this.BMap = BMap
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 15
},
handleShow(marker) {
// 点击后，该marker显示label信息
this.curMarker = marker
}
}
}
</script>
六. 使用中遇到的问题（未解决）
- 个性化地图后，当缩放到zoom = 5 的时候，世界地图会出现一条空白
- 个性化地图后，缩放浏览器，再移动地图，地图上的文字会出现重叠，我试过官方例子也有这个问题。
各位大佬们，如果你们有解决方法，可以私我，谢谢各位大佬
类似资料：