插件：Vue Baidu Map
安装：npm install vue-baidu-map --save
难点：
1：地图的引用
2：地图上标记点的画法
3：消息窗体的自定义画法
4：自带的点显示的窗体的屏蔽
全局注册：
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的** 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY'
})
<template>
<baidu-map class="bm-view">
</baidu-map>
</template>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>
基础常量：
ControlAnchor
此常量表示控件的定位。
| 常量 | 描述 |
|---|---|
| BMAP_ANCHOR_TOP_LEFT | 控件将定位到地图的左上角 |
| BMAP_ANCHOR_TOP_RIGHT | 控件将定位到地图的右上角 |
| BMAP_ANCHOR_BOTTOM_LEFT | 控件将定位到地图的左下角 |
| BMAP_ANCHOR_BOTTOM_RIGHT | 控件将定位到地图的右下角 |
Animation
此常量表示标注的动画效果。
| 常量 | 描述 |
|---|---|
| BMAP_ANIMATION_DROP | 坠落动画 |
| BMAP_ANIMATION_BOUNCE | 跳动动画 |
NavigationControlType
此常量表示平移缩放控件的类型。
| 常量 | 描述 |
|---|---|
| BMAP_NAVIGATION_CONTROL_LARGE | 标准的平移缩放控件（包括平移、缩放按钮和滑块） |
| BMAP_NAVIGATION_CONTROL_SMALL | 仅包含平移和缩放按钮 |
| BMAP_NAVIGATION_CONTROL_PAN | 仅包含平移按钮 |
| BMAP_NAVIGATION_CONTROL_ZOOM | 仅包含缩放按钮 |
MapType
表示一种地图类型。
| 常量 | 描述 |
|---|---|
| BMAP_NORMAL_MAP | 此地图类型展示普通街道视图 |
| BMAP_PERSPECTIVE_MAP | 此地图类型展示透视图像视图 |
| BMAP_SATELLITE_MAP | 此地图类型展示卫星视图 |
| BMAP_HYBRID_MAP | 此地图类型展示卫星和路网的混合视图 |
我们项目中引用方式
import BaiduMap from 'vue-baidu-map';
import {BmlMarkerClusterer} from 'vue-baidu-map';
Vue.use(BaiduMap, {
ak: 'awun1LZFPXDBFSHKIb6Zawl8G15Buhno'
});
画页面引用：
页面中选择点的效果实现：
方式1：可以通过搜索地点选择地图上的位置；
方式2：可以直接在地图上选择地点
<baidu-map style="width:100%; height:100% ;" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true" :map-click="false" @click ="mapClickPoint">
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
<bm-marker v-if='mapInfoFlag' :position="{lng: mapInfo.lng, lat:mapInfo.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
</baidu-map>
同时显示多个比标记点和自定义窗体的效果实现
<baidu-map style="width:100%; height:100% ;" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true" :map-click="false">
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
<bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
<bml-marker-clusterer v-if="mapInfoFlag == true" :averageCenter="true">
<bm-marker v-for="(marker,index) of mapInfo" :key='index' :icon="{url:marker.icon,size:{width:32,height:32}}" :position="{lng: marker.longitude, lat: marker.latitude}" @click="clickMarker(marker,'1')" :offset={width:0,height:-16}></bm-marker>
</bml-marker-clusterer>
<my-overlay v-if="infoWindow.show" :position="{lng: infoWindow.lng, lat: infoWindow.lat}" :userInfo="selectUser" @backData="changeShow"> </my-overlay>
</baidu-map>
methods: {
handler ({BMap, map}) {
this.center.lng = 113.556598
this.center.lat = 22.28312
this.zoom = 10
},
}
ready的用法
地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例。百度地图组件是异步加载，请不要尝试在组件的生命周期中访问 BMap 核心类和 map 实例，如有需要，请在所需组件的 ready 事件回调函数的参数中获取。
设置经纬度和缩放等级
:center="center" :zoom="zoom"
开启滚轮缩放
:scroll-wheel-zoom="true"
在地图左上角加入地图类型控件
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
添加一个自定义图标的点
<bm-marker v-if='mapInfoFlag' :position="{lng: mapInfo.lng, lat:mapInfo.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
在左下角加入比例尺控件
<bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
点聚合
BmlMarkerClusterer 能够聚合它包含的所有 BmMarker 组件。
属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| gridSize | Size | 网格大小 | |
| maxZoom | Number | 聚合的最大缩放级别 | |
| minClusterSize | Number | 单个聚合的最小数量 | |
| styles | Array[{url, size, opt_anchor, textColor, opt_textSize}] | [] | 聚合的样式风格集合 |
| averageCenter | Boolean | false | 单个聚合的落脚点是否是聚合内所有标记的平均中心 |
<bml-marker-clusterer v-if="mapInfoFlag == true" :averageCenter="true">
<bm-marker v-for="(marker,index) of mapInfo" :key='index' :icon="{url:marker.icon,size:{width:32,height:32}}" :position="{lng: marker.longitude, lat: marker.latitude}" @click="clickMarker(marker,'1')" :offset={width:0,height:-16}></bm-marker>
</bml-marker-clusterer>
去掉点击一下默认标记点显示百度地图的默认弹窗
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| map-click | Boolean | true | 允许点击 该项仅在地图组件挂载时加载一次 |
:map-click="false"
自定义覆盖物
BmOverlay 自定义覆盖物组件是一个高度订制化的组件，通过 draw 事件进行覆盖物的重绘。推荐的使用方法是将重绘逻辑相同的 BmOverlay 进行二次封装。自定义覆盖物仅在地图发生变化时触发 draw 方法重绘覆盖物视图，若需要定制数据视图同步策略，请手动触发 BmOverlay 的 reload 实例方法。
属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| pane | String | 自定义覆盖物所在容器。包含 floatPane、markerMouseTarget、floatShadow、labelPane、markerPane、markerShadow、mapPane共 7 种合法值 |
事件
| 事件名 | 参数 | 描述 |
|---|---|---|
| initialize | event{BMap, map, el, overlay} | 覆盖物初始化时触发此事件 |
| draw | event{BMap, map, el, overlay} | 地图发生改变时触发此事件 |
具体实现方式
<template>
<!-- floatPane、markerMouseTarget、floatShadow、labelPane、markerPane、markerShadow、mapPane 共 7 种合法值 -->
<bm-overlay
• ref="customOverlay"
• :class="{sample: true}"
• :style="pointColor"
• pane="floatShadow"
• @draw="draw">
<div style="background-color: #fff;border: solid 1px #CFCFCF; border-radius: 7px 7px 0 0;;border-bottom: none; width: 99%; height: calc(100% - 12px);">
<div class='innerTitle'>
<div ><span class='title_icon-person'></span> </div>
<div class="nowrap" style="line-height: 36px;width: 190px;">
<span class= 'title-userName'>{{userInfo.userName}}</span>
</div>
<div @click="closeOverLay" style="cursor: pointer;">
<span><i class="iconfont iconshanchu"></i></span>
</div>
</div>
<div class='body-all'>
<ul class='ul-all' >
<li class="nowrap" >
姓名：<span >{{userInfo.userName}}</span>
</li>
<li class="nowrap" >
性别：<span >{{userInfo.gender}}</span>
</li>
<li class="nowrap" >
部门：<span >{{userInfo.orgName}}</span>
</li>
<li class="nowrap" >
电话：<span >{{userInfo.phone}}</span>
</li>
<li style=" text-align: left;" >
通话：
<span @click="openVideo" class='tonghua' >
<i class="iconfont iconbofang iconfize"></i>
</span>
<span @click="openAudio" class='tonghua' >
<i class="iconfont iconyinpinwenjian iconfize"></i>
</span>
</li>
</ul>
</div>
</div>
<div class="bottom_icon-person" ></div>
</bm-overlay>
</template>
<script>
import { BmOverlay } from 'vue-baidu-map'
export default {
props: ['text', 'position', 'color','userInfo'], // 用来接受传入的值，用来定制样式
components: { BmOverlay},
data () {
return {
pointColor: '',
}
},
methods: {
// 这是百度地图的重绘函数,用于维持覆盖物的位置（这里的值貌似会影响拖拉时的偏移度）
draw ({ el, BMap, map }) {
const { lng, lat } = this.position
const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
el.style.left = pixel.x - 135 + 'px'
el.style.top = pixel.y - 190 + 'px'
},
closeOverLay(){
console.log("关闭按钮")
this.$emit('backData','1')
},
openAudio(){
var self = this;
self.$emit('backData','2')
},
openVideo(){
var self = this;
self.$emit('backData','3')
},
init(){
var self = this;
},
},
created:function(){
var self = this;
self.init();
},
watch: {
position: {
handler () {
this.$refs.customOverlay.reload() // 当位置发生变化时，重新渲染，内部会调用draw
},
deep: true
}
},
mounted () {
this.pointColor = this.color // 这里我是用来获取传入的值来定义样式的，可能有点多余了，pointColor是组件中绑定的样式，color是传进来的样式。【这样就可以根据传入的样式来显示不同样子的点了】
},
}
</script>
<style scoped>
.sample {
width: 250px;
height: 200px;
color: #000;
box-shadow: 0 0 5px #fff;
padding: 0px;
background: transparent;
}
.content-ellipsis1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title-userName{
color: #008AEB;
font-size: 15px;
font-weight: normal;
margin-left: 10px;
font-size: 15px;
}
.innerTitle {
height: 36px;
display: flex;
border-radius: 7px 7px 0px 0px;
background-color: #F4F4F4;
border-bottom: solid 1px #E7E7E7;
display:flex;
border-radius: 7px 7px 0px 0px;
}
.nowrap{
width: 200px;
line-height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.iconfize{
font-size: 25px;
}
.body-all{
margin: 6px 15px;
background-color: #E4EFF9;
border-radius: 7px
}
.ul-all{
margin-block-start: 0px;
list-style-type: none;
padding: 5px;
margin-left: 10px;
margin-bottom: 0px;
padding: 5px;
}
.tonghua{
cursor: pointer;
margin-left:15px;
width: 50px;
height: 35px;
}
</style>