安裝vue-baidu-map-3x:
????????
// vue3
$ npm install vue-baidu-map-3x --save// vue2
$ npm install vue2-baidu-map --save
全局注冊/局部注冊:
? ? ? ?
import { createApp } from 'vue'
import App from './App.vue'
import BaiduMap from 'vue-baidu-map-3x'const app = createApp(App);app.use(BaiduMap, {// ak 是在百度地圖開發者平臺申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */ak: '百度地圖ak',// v:'2.0', // 默認使用3.0// type: 'WebGL' // ||API 默認API (使用此模式 BMap=BMapGL)
});
app.mount('#app');
<template><baidu-map class="bm-view" :zoom="12" :center="{lng: 116.404, lat: 39.915}" ></baidu-map>
</template><style>
.bm-view {width: 100%;height: 300px;
}
</style>
?局部注冊:
????????
<template><baidu-map class="map" ak="BaiduMapAK" v="3.0" type="API" :center="{lng: 116.404, lat: 39.915}" :zoom="15"></baidu-map>
</template><script setup>
import { BaiduMap } from 'vue-baidu-map-3x'
</script><style>
.map {width: 100%;height: 300px;
}
</style>
自定義覆蓋物:
????????