Vue接入百度地图显示及相关操作

Vue接入百度地图的API

首先你要有一个百度地图的key就是CK

申请网址：http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

介绍：其实这个已经封装的很好了，在Vue里面也是，你利用npm把插件装进来，直接配置就可以使用。然后你需要什么时间就写什么

说几个网址方便参考：

Vue的官方文档 https://dafrok.github.io/vue-baidu-map/#/zh/start/usage

百度地图拾取坐标 http://api.map.baidu.com/lbsapi/getpoint/

事件操作文档 http://lbsyun.baidu.com/jsdemo.htm#canvaslayer

H5使用（也是官方文档）http://lbsyun.baidu.com/jsdemo.htm#canvaslayer

The Start

1.首先下载插件

$ npm install vue-baidu-map --save或者 yarn add vue-baidu-map --save

2.在Vue里面进行引入（基本上就是单独引入全局太浪费）

import { BaiduMap } from "vue-baidu-map"

3.依赖注入在components里面进行声明

components: { BaiduMap },

4.直接在组件里面进行引用就可以

       <baidu-map
        style=" width:500px;height:370px;float:left"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="my_scroll_wheel_zoom"
        class="baidu-map-view"
        @ready="map_handler"
        ak="CdGWCqVpavs1D9POs2sMR7n64m59UolO"
      ></baidu-map>

注意：我在这写的时候把center和zoom写在了data里面,所以在data里面加

data() {
    return {
      center: { lng:0, lat:0},
      zoom: 20
    };
  },

ready 是在地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例——{BMap, map}。百度地图组件是异步加载，不要在组件的生命周期中访问 BMap 核心类和 map 实例，如有需要，请在所需组件的 ready 事件回调函数的参数中获取。

   //加入回调方法
   methods: {
    //地图显示的回调
    map_handler({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
    }
  }

到此就可以显示基本的地图组件了

操作及案例

metho添加下面代码进行关联实现效果

//点击进行传入经纬度值 就可以实现相应的移动
getClickInfo(e) {
      console.log(e.point.lng);
      console.log(e.point.lat);
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    }

//点击获取经纬度坐标并标点
	this.map.addEventListener('click', (e) => {
          const point = new this.BMap.Point(e.point.lng, e.point.lat)
          const marker = new this.BMap.Marker(point) // 设置点击位置
          map.clearOverlays() // 清空地图上其他红色位置标识
          map.addOverlay(marker)  // 添加指定点
        })

// 获取浏览器当前定位
getCurlocation() {
            if (!this.BMap) return false
            let BMap = this.BMap
            let geolocation = new BMap.Geolocation()
            let _this = this
            geolocation.getCurrentPosition(function(r) {
                _this.map_center = r.point
                _this.shop_lng = r.point.lng
                _this.shop_lat = r.point.lat
            })
        }