vue项目中使用百度地图(vue-baidu-map)

时间 2019-11-07

标签 vue 项目使用百度地图 map 繁體版

原文原文链接

在使用vue作项目的时候，有用到百度地图，使用了vue-baidu-map插件，包括拾取位置坐标，搜索位置等

1.引入方式

可在app.js中全局引入

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  /* 须要注册百度地图开发者来获取你的ak */
  ak: 'YOUR_APP_KEY'
})

也能够局部引入，组件需在node_modules/vue-baidu-map/components里面找，局部引入要在<baidu-map ak=''></baidu-map>中声明ak属性

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmView from 'vue-baidu-map/components/map/MapView.vue'
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'
export default {
  components: {
      BaiduMap,
      BmView,
      BmLocalSearch
  },
}

使用(局部引用须要加上ak属性)

<div class="map">
  <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
  <baidu-map class="bmView" :scroll-wheel-zoom="true" :center="location" :zoom="zoom" @click="getLocationPoint" ak="YOUR_APP_KEY">
    <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
    <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
  </baidu-map>
</div>

注意点：(地图须要显示的定义高度)vue

BmView 是用于渲染百度地图实例可视化区域的容器，一般与 LocalSearch 等会输出其它视图的组件结合使用
BaiduMap 组件容器自己是一个空的块级元素，若是容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内
没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，由于百度地图会根据地名自动调整 zoom 的值
因为百度地图 JS API 只有 JSONP 一种加载方式，所以 BaiduMap 组件及其全部子组件的渲染只能是异步的。所以，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。

百度地图开发平台jsAPI：百度地图jsAPI
vue-baidu-map文档：vue-baidu-map文档
高德地图vue-amap文档：高德地图文档

2.搜索

搜索是利用bm-local-search来进行搜索，这个不知道是否是由于我外层用了固定定位，致使我在输入框中输入位置后，就把地图给覆盖了，没有作到官方文档那种，而后我就用了display: none来隐藏这个容器

<div class="map">
  <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置"></el-input>
  <!-- 给地图加点击事件getLocationPoint，点击地图获取位置相关的信息，经纬度啥的 -->
  <!-- scroll-wheel-zoom：是否能够用鼠标滚轮控制地图缩放，zoom是视图比例 -->
  <baidu-map
    class="bmView"
    :scroll-wheel-zoom="true"
    :center="location"
    :zoom="zoom"
    @click="getLocationPoint"
    ak="YOUR_APP_KEY"
  >
    <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
    <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
  </baidu-map>
</div>

data() {
    return {
      location: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 12.8,
      addressKeyword: "",
    };
},
methods: {
    getLocationPoint(e) {
      this.lng = e.point.lng;
      this.lat = e.point.lat;
      /* 建立地址解析器的实例 */
      let geoCoder = new BMap.Geocoder();
      /* 获取位置对应的坐标 */
      geoCoder.getPoint(this.addressKeyword, point => {
        this.selectedLng = point.lng;
        this.selectedLat = point.lat;
      });
      /* 利用坐标获取地址的详细信息 */
      geocoder.getLocation(e.point, res=>{
          console.log(res);
      },
}

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期推荐：node