vue Baidu Map --- vue百度地图插件

官网：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

安装：

$ npm install vue-baidu-map --save

 

全局注册

全局注册将一次性引入百度地图组件库的所有组件。

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>

使用搜索插件

　　　　<el-form-item label="输入地址关键词">
        <el-input v-model="keyword"/> <!--输入关键词触发搜索-->
        <input v-model="location" type="hidden">  <!--定位这个location点 如：厦门 地图打开就地位在厦门-->
      </el-form-item>

        <baidu-map
          :center="center"
          :zoom="15"
          :scroll-wheel-zoom="true" <!--是否可以用鼠标滚轮控制缩放-->
          @click="getPoint"> <!--地图的点击事件 点击地图获取所需要的信息 如：经度、纬度-->
          <!--地图类型，两种：一种是路线一种是绿的那种-->
          <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"/>
          <bm-view class="map"/>
          <bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"/>  <!--隐藏下面的地址信息 美观点-->

script： data数据

 　　  location: '厦门',
      keyword: '厦门',
      zoom: 15,
      center: {
        lng: 118.206484,
        lat: 24.492774
      }

事件：获取经纬度

　　getPoint(e) {
      // console.log(e)
      this.form.lng = e.point.lng
      this.form.lat = e.point.lat
    },