在使用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>注意點：(地圖需要顯示的定義高度)
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);
},
}正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）