百度地图 ( 四 ) 与 VUE 结合

6.VUE中使用

6.0.准备

参考网址: https://dafrok.github.io/vue-baidu-map/#/zh/index

6.0.1.加载依赖

VUE项目中导入百度地图依赖

npm install vue-baidu-map --save

6.0.2.导入组件

导入组件

import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList} from 'vue-baidu-map'

声明组件

    components: {
        BaiduMap,
        BmNavigation,
        BmView,
        BmGeolocation,
        BmCityList
    },

6.1.显示容器

<baidu-map  class="map" :center="center" :zoom="zoom"  :scroll-wheel-zoom="true"    ak="您的密钥"
                   @click="clickEvent"   @ready="handler" >
    
    <!-- //地图控件位置 -->
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <!-- //城市列表 -->
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
    <!-- //定位当前位置 -->
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation>

    <!-- //地图容器 -->
    <bm-view :style="{width:'100%',height: this.clientHeight+'px',flex: 1,marginBottom:'-30px'}"></bm-view>
</baidu-map>

6.1.1.baidu-map 地图容器

BaiduMap 百度地图容器，用于挂载百度地图核心类和一个百度地图实例。是所有地图组件的根组件。

ak : 您的密钥

center 定位 :

定位, 可使用 如 “广州市海珠区” 的地区字符串，也可以使用对象如 {lng: 116.404, lat: 39.915} 表示经纬度

如: 在 data 中定义对应数据

// center: {lng: 116.449562, lat: 39.926373}, //北京的经纬度
center: "广州市海珠区", 

zoom 缩放等级 :

scroll-wheel-zoom 允许鼠标滚轮缩放 : 默认为false

ready 加载事件 :

地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例 {BMap, map} 。

由于百度地图组件是异步加载，不要尝试在组件的生命周期中访问 BMap 核心类和 map 实例，

如有需要，在所需组件的 ready 事件回调函数的参数中获取。

如: 处理的函数在 methods中 定义

handler ({BMap, map}) {
    // // 跳转到用户所在地址
    // let _this = this;	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
    // var geolocation = new BMap.Geolocation();
    // geolocation.getCurrentPosition(function(r){
    //     console.log("r:",r);
    //     _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
    //     _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
    //     _this.initLocation = true;
    // },{enableHighAccuracy: true})

    // 建立 map 实例
    window.map = map;
},

click 点击事件:

左键单击地图时触发此事件。参数是 {type, target, point, pixel, overlay}

当双击时，产生的事件序列为： click click dblclick

如: 处理的函数在 methods中 定义

//点击地图监听 
clickEvent(e){
    map.clearOverlays();
    //增加标注
    var point = new BMap.Point(e.point.lng, e.point.lat);
    var myMarker = new BMap.Marker(point);
    map.addOverlay(myMarker);

    //用所定位的经纬度查找所在地省市街道等信息
    var gc = new BMap.Geocoder();

    gc.getLocation(point, function (rs) {
        var addComp = rs.addressComponents;
		console.log( addComp )
    });
},

6.1.2.bm-view 地图视图

BmView 是用于渲染百度地图实例可视化区域的容器，通常与 LocalSearch 等会输出其它视图的组件结合使用。
当 BaiduMap 组件中没有挂载 BmView 组件时，百度地图实例将渲染在 <baidu-map> 节点上。
当 BaiduMap 挂载了 BmView 组件时，百度地图实例将渲染在 <bm-view> 节点上。
每个 BaiduMap 组件应对应唯一一个 BmView 组件，如果声明了多个 BmView 组件，只有第一个能被正常渲染。该组件主要用于控制布局。除了能够渲染地图视图以外，没有任何其它用途。

6.2.控件

anchor 控件的定位:

常量	描述
BMAP_ANCHOR_TOP_LEFT	控件将定位到地图的左上角
BMAP_ANCHOR_TOP_RIGHT	控件将定位到地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT	控件将定位到地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT	控件将定位到地图的右下角

6.2.1.BmScale 比例尺

 <baidu-map class="map" center="北京">
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
  </baidu-map>

6.2.2.BmNavigation 缩放

<!-- //地图控件位置 -->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

6.2.3.BmMapType 地图类型

<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" 
             anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>

6.2.4.BmOverviewMap 缩略图

<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>

6.2.5.BmGeolocation 定位

<!-- //定位当前位置 -->
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation>

showAddressBar :

​ 是否显示定位信息面板。默认显示定位信息面板

autoLocation :

​ 添加控件时是否进行定位。根据 W3C相关标准描述，为保证用户隐私安全，geoLocation API 必须使用 SSL 连接，并获得用户的手动许可。请确保使用该属性时满足上述条件。

locationSuccess 事件 :

定位成功后触发此事件 . 如 : 处理的函数在 methods中 定义

//定位成功回调
getLoctionSuccess(point, AddressComponent, marker){
    map.clearOverlays();

    var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat));
    map.addOverlay(myMarker);
},

6.2.6.BmCityList 城市列表

控件仅在地图视图尺寸足够大时生效。

 <!-- //城市列表 -->
<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>