資訊專欄INFORMATION COLUMN
摘要：當(dāng)屬性為合法地名字符串時(shí)例外，因?yàn)榘俣鹊貓D會(huì)根據(jù)地名自動(dòng)調(diào)整的值由于百度地圖只有一種加載方式，因此組件及其所有子組件的渲染只能是異步的。
在使用vue做項(xiàng)目的時(shí)候，有用到百度地圖，使用了vue-baidu-map插件，包括拾取位置坐標(biāo)，搜索位置等1.引入方式
可在app.js中全局引入
import BaiduMap from "vue-baidu-map"
Vue.use(BaiduMap, {
/* 需要注冊(cè)百度地圖開發(fā)者來獲取你的ak */
ak: "YOUR_APP_KEY"
})
也可以局部引入，組件需在node_modules/vue-baidu-map/components里面找，局部引入要在
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屬性)
注意點(diǎn)：(地圖需要顯示的定義高度)
BmView 是用于渲染百度地圖實(shí)例可視化區(qū)域的容器，通常與 LocalSearch 等會(huì)輸出其它視圖的組件結(jié)合使用
BaiduMap 組件容器本身是一個(gè)空的塊級(jí)元素，如果容器不定義高度，百度地圖將渲染在一個(gè)高度為 0 不可見的容器內(nèi)
沒有設(shè)置 center 和 zoom 屬性的地圖組件是不進(jìn)行地圖渲染的。當(dāng)center 屬性為合法地名字符串時(shí)例外，因?yàn)榘俣鹊貓D會(huì)根據(jù)地名自動(dòng)調(diào)整 zoom 的值
由于百度地圖 JS API 只有 JSONP 一種加載方式，因此 BaiduMap 組件及其所有子組件的渲染只能是異步的。因此，請(qǐng)使用在組件的 ready 事件來執(zhí)行地圖 API 加載完畢后才能執(zhí)行的代碼，不要試圖在 vue 自身的生命周期中調(diào)用 BMap 類，更不要在這些時(shí)機(jī)修改 model 層。
百度地圖開發(fā)平臺(tái)jsAPI：百度地圖jsAPI
vue-baidu-map文檔：vue-baidu-map文檔
高德地圖vue-amap文檔：高德地圖文檔
2.搜索搜索是利用bm-local-search來進(jìn)行搜索，這個(gè)不知道是不是因?yàn)槲彝鈱佑昧斯潭ǘㄎ?，?dǎo)致我在輸入框中輸入位置后，就把地圖給覆蓋了，沒有做到官方文檔那種，然后我就用了display: none來隱藏這個(gè)容器
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;
/* 創(chuàng)建地址解析器的實(shí)例 */
let geoCoder = new BMap.Geocoder();
/* 獲取位置對(duì)應(yīng)的坐標(biāo) */
geoCoder.getPoint(this.addressKeyword, point => {
this.selectedLng = point.lng;
this.selectedLat = point.lat;
});
/* 利用坐標(biāo)獲取地址的詳細(xì)信息 */
geocoder.getLocation(e.point, res=>{
console.log(res);
},
}
正在努力學(xué)習(xí)中，若對(duì)你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）
往期推薦：
實(shí)現(xiàn)單行及多行文字超出后加省略號(hào)
判斷iOS和Android及PC端
使用vue開發(fā)移動(dòng)端管理后臺(tái)
畫三角形
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106441.html
摘要：下引入百度地圖的兩種方法前言今天有個(gè)項(xiàng)目需要用到百度地圖，一般我們?cè)谝苿?dòng)端使用百度地圖，都是直接通過這樣的方式，直接引入百度地圖的。通過模塊化引入的方法實(shí)際上百度地圖官方去年已經(jīng)開源了基于的和的對(duì)應(yīng)開源組件，我們可以直接通過安裝，然后使用。 vue.js下引入百度地圖jsApi的兩種方法 前言 今天有個(gè)項(xiàng)目需要用到百度地圖，一般我們?cè)谝苿?dòng)端使用百度地圖，都是直接通過這樣的方式，直接引入...
摘要：百度地圖百度地圖作為項(xiàng)目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因?yàn)槠渫晟频募夹g(shù)文檔案例和多樣化的開源插件等上有的組件可以直接使用，有興趣的同學(xué)可以直接上手這里不采用已經(jīng)封裝好的地圖組件，而是從零開始，采用原生的百度地圖一 百度地圖 百度地圖作為項(xiàng)目中地圖可視化最重要的一部分，不止其為國人自己的地圖，還因?yàn)槠渫晟频募夹g(shù)文檔案例和多樣化的開源插件（echarts、Mapv等...
摘要：我試過，以上這種方法好像是可行，效果可以出來，但我們最好采用作者提供的正確方法推薦這種方法那下面解決進(jìn)入頁面自動(dòng)定位的方法也是在這里。 寫在前面：我只是一個(gè)前端小白，文章中的提到可能會(huì)有不足之處，僅提供一個(gè)參考。若有不完善的地方，歡迎各位大佬指出！，希望對(duì)你有幫助！ 好了，入正題。其實(shí)之前也被這問題困擾過，在網(wǎng)上也查了一番，沒找到解決方法。直到今天，在GitHub冒昧地向大佬提了一個(gè)i...
摘要：我采用了插件原生百度地圖的二次封裝，但是插件里的紅點(diǎn)標(biāo)記需要用到經(jīng)緯度值。 先扯一會(huì)兒 首先非常感謝大家的閱讀(感謝已加粗)，這是我人生中第一次寫技術(shù)文章(以前打字都費(fèi)勁)，本人小white一個(gè)(秀一下英語詞匯量)，技術(shù)不咋地，就是愛分享，動(dòng)不動(dòng)還來個(gè)原創(chuàng)，你說氣人不~ 閑話少說，進(jìn)入主題?。?！ 重點(diǎn)部分 最近在做一個(gè)基于vue的設(shè)備管理系統(tǒng)，其中有一個(gè)需求：需要把設(shè)備所在地的...
閱讀 943·2023-04-25 19:43
閱讀 4239·2021-11-30 14:52
閱讀 4024·2021-11-30 14:52
閱讀 4132·2021-11-29 11:00
閱讀 4023·2021-11-29 11:00
閱讀 4154·2021-11-29 11:00
閱讀 3871·2021-11-29 11:00
閱讀 6761·2021-11-29 11:00
