vue-baidu-map 的簡單使用

首先附上vue-baidu-map 文檔地址: https://dafrok.github.io/vue-baidu-map/#/zh/index

1.安裝,初步使用,文檔說的都很明白,就不在過多重復,特別強調哦一下 @ready 方法必須配置一下 如下圖:

2..使用控件,覆蓋物之類的方法

 html:

<!-- 組件 -->
        <baidu-map
          class="Bmap"
          ak='你的秘鑰'
          :center="center"
          :zoom="zoom"
          @ready="handler"
          :style='conheight' //自己定義了高度 按瀏覽器高度變化
          :scroll-wheel-zoom="true" //鼠標滾動控制縮放
          @click='getPoint'
        >
          <!-- 地圖;類型 -->
          <bm-map-type
            :map-types="['BMAP_HYBRID_MAP','BMAP_NORMAL_MAP']"
            anchor="BMAP_ANCHOR_TOP_RIGHT'
          ></bm-map-type>
          <!-- 城市 搜索 列表 -->
          <bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{width:100,height:10}"></bm-city-list>   //  標紅部分 設置位置(找了好久才找到這個方法)
< -- 定位-->

          <bm-geolocation
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            :showAddressBar="true"
            :autoLocation="true"
          ></bm-geolocation>
          <!-- 標記 點 -->
          <bm-marker :position="postionMap">
          </bm-marker>
        </baidu-map>

js

import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'; // 局部注冊
import BmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'; //定位
import BmMapType from 'vue-baidu-map/components/controls/MapType.vue'; //地圖類型
import BmCityList from 'vue-baidu-map/components/controls/CityList.vue'; //城市列表
import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'; //標記 點


export default {
  name: 'mapNum',
  components: { BaiduMap, BmGeolocation, BmMapType, BmCityList, BmMarker },
 data () {
    return {
      center: { lng: 0, lat: 0 },  //經緯度
      zoom: 3,　 //地圖展示級別
      }
   }
}

效果圖:地圖類型,選擇城市,定位