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,　 //地圖展現級別
 } } }

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