前情提要：

提示：該博客vue采用vue3，使用百度地圖通過組件vue-baidu-map-3x：

組件官網(wǎng)：https://map.heifahaizei.com/doc/baidu-map.html

下面會從頭開始介紹如何使用百度地圖以及常用組件功能(附帶遇到的問題和解決方案)

申請百度地圖AK秘鑰

步驟：1.進(jìn)入百度地圖開放平臺 | 百度地圖API SDK | 地圖開發(fā) 2.打開頂部控制臺 3.找到應(yīng)用管理中-我的應(yīng)用-創(chuàng)建應(yīng)用

注意：1.前端開發(fā)選擇瀏覽器端，2.必須配置白名單，只有該白名單中的網(wǎng)站才能成功發(fā)起調(diào)用，多個(gè)域名之間請用英文半角逗號隔開，如果不想對任何域名做限制，設(shè)置為英文半角星號*

接下來復(fù)制AK

開啟Vue3使用vue-baidu-map-3x：

1.安裝

安裝vue-baidu-map-3x：npm install vue-baidu-map-3x --save：

全局注冊：在main.js中

局部注冊：局部注冊這邊請

注意事項(xiàng)：1.BaiduMap 組件容器本身是一個(gè)空的塊級元素，如果容器不定義高度，百度地圖將渲染在一個(gè)高度為 0 不可見的容器內(nèi)

                    2.沒有設(shè)置 center 和 zoom 屬性的地圖組件是不進(jìn)行地圖渲染的。當(dāng)center 屬性為合法地名字符串時(shí)例外，因?yàn)榘俣鹊貓D會根據(jù)地名自動調(diào)整 zoom 的值

                    3.由于百度地圖 JS API 只有 JSONP 一種加載方式，因此 BaiduMap 組件及其所有子組件的渲染只能是異步的。因此，請使用在組件的 ready 事件來執(zhí)行地圖 API 加載完畢后才能執(zhí)行的代碼，不要試圖在 vue 自身的生命周期中調(diào)用 BMap 類，更不要在這些時(shí)機(jī)修改 model 層

2.應(yīng)用

1.初始展示

注意：地圖初始須設(shè)置center，zoom否則地圖不會初始化， 地圖須設(shè)置高度才能展示，且必須設(shè)置寬高

<template>
  <baidu-map
    class="bm-view"
    :center="{ lng: 116.404, lat: 39.915 }" 
    :zoom="15"
  >
  </baidu-map>
</template>
<script setup>
</script>
<style scoped>
.bm-view {
  width: 100%;
  height: 80%;
}
</style>

2.控件

控件屬性：

1.anchor：控件所在方位 可選(BMAP_ANCHOR_TOP_LEFT,BMAP_ANCHOR_TOP_RIGHT,BMAP_ANCHOR_BOTTOM_LEFT，BMAP_ANCHOR_BOTTOM_RIGHT) 左上，右上，左下，右下

2.offset：控件偏移值 可在anchor基礎(chǔ)上進(jìn)行寬高偏移 :offset='{height:100,width:100}'

縮放控件：

<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

 比例尺：

<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>

地圖類型：

<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" ></bm-map-type> 分別是二維地圖和衛(wèi)星地圖

 縮略圖：

<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>

 版權(quán)：

<bm-copyright anchor="BMAP_ANCHOR_TOP_RIGHT" :copyright="[{ id: 1, content: '<a>唯我自知博客</a>' },]"></bm-copyright>

 城市列表-選擇城市搜索城市(支持市級以上搜索)

<bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>

 全景控件

<bm-panorama></bm-panorama>

 測距-第三方測距插件

測距詳細(xì)代碼

 定位控件

定位詳解-在這里我遇到了開啟定位依舊找不到位置的問題

3.自定義主題

注意：如果：center綁定的不是經(jīng)緯度而是地址名稱，則主題效果不生效

地圖模板：https://lbs.baidu.com/apiconsole/custommap

百度地圖實(shí)例允許用戶設(shè)置自定義配色風(fēng)格以配合不同風(fēng)格的主題設(shè)計(jì)，主題數(shù)據(jù)格式參考

地圖模板

<template>
  <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="15" :mapStyle="mapStyle">
  </baidu-map>
</template>
<script setup>
import { ref } from 'vue';
const mapStyle = ref({
  styleJson: [
    //樣式
  ]
});
</script>

 將上方復(fù)制的代碼填入到mapStyle.styleJson中

4.覆蓋物--點(diǎn)

<bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true" ></bm-marker>

詳細(xì)屬性 -- 對屬性類型不明確的 基礎(chǔ)中搜索類型

 事件

總結(jié)

到此這篇關(guān)于vue3使用百度地圖超詳細(xì)的文章就介紹到這了,更多相關(guān)vue3使用百度地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論