vue 引用百度地图插件 Vue Baidu Map

插件：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'
})

​

基础常量：

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：可以直接在地图上选择地点

同时显示多个比标记点和自定义窗体的效果实现

    
    
    
        
     
     
 
 
 
  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"

在地图左上角加入地图类型控件

添加一个自定义图标的点

在左下角加入比例尺控件

点聚合

BmlMarkerClusterer 能够聚合它包含的所有 BmMarker 组件。

属性

属性名	类型	默认值	描述
gridSize	Size		网格大小
maxZoom	Number		聚合的最大缩放级别
minClusterSize	Number		单个聚合的最小数量
styles	Array[{url, size, opt_anchor, textColor, opt_textSize}]	[]	聚合的样式风格集合
averageCenter	Boolean	false	单个聚合的落脚点是否是聚合内所有标记的平均中心

 

去掉点击一下默认标记点显示百度地图的默认弹窗

属性名	类型	默认值	描述
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}	地图发生改变时触发此事件

具体实现方式

 

​