2種在vue項目中使用百度地圖的簡單方法
更新時間：2018年09月28日 15:12:20 投稿：laozhang
在本篇文章中我們給大家整理了2種關于VUE項目中使用百度地圖的最簡單的方法，非常實用，一起來學習下。
地圖在項目中用得很多，最近也用了幾次，好長時間不用都記不清了，閑暇時整理了vue里使用百度地圖的2種方法，方便自己查看，也分享給大家，希望可以幫助有需要的人。
普遍的方法是：
1.index.html 中引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>
2.新建個組件maps
注意 ：不要把組件命名為map，因為html中有map標簽，會報錯
報錯：Do not use built-in or reserved HTML elements as component id:map
3.然后就可以直接再組件了寫相關代碼了
mounted(){
var map = new BMap.Map('map')
var point = new BMap.Point(108.840053, 34.129522)
map.centerAndZoom(point, 14)
//...
}
另一個方法：
1.新建一個map.js
export function MP(ak) {
return new Promise(function (resolve, reject) {
window.onload = function () {
resolve(BMap)
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
})
}
2.在需要用到的地圖的vue頁面中引入
import {MP} from './map.js'
3.在vue頁面中調用
data:{
return{
ak:'1287348913029483740293'//密鑰
}
},
mounted(){
this.$nextTick(function(){
var _this = this;
MP(_this.ak).then(BMap => {
//在此調用api
})
}
}
相關文章
這篇文章主要介紹了webstrom Debug 調試vue項目的方法步驟，詳細的介紹了兩種調試vue項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue3配置router路由并實現(xiàn)頁面跳轉,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue中img src 動態(tài)加載本地json的圖片路徑寫法
這篇文章主要介紹了vue中的img src 動態(tài)加載本地json的圖片路徑寫法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
今天用vue來實現(xiàn)一個分頁組件，總體來說，vue實現(xiàn)比較簡單，樣式部分模仿了elementUI。接下來本文通過實例代碼給大家介紹100行代碼實現(xiàn)一個vue分頁組功能，感興趣的朋友跟隨小編一起看看吧2018-11-11
Vue3使用ref和reactive管理狀態(tài)的代碼示例
ref 和 reactive 是 Composition API 中用來聲明響應式數(shù)據(jù)的兩個核心函數(shù),在 Vue 3 中,使用 setup 語法糖可以更簡潔地使用這些功能,本文將探討如何使用 ref 和 reactive 來管理狀態(tài),并解釋它們之間的區(qū)別,需要的朋友可以參考下2024-09-09
本文給大家分析下vue2.0幾個重要的與自己目前項目相關的變化，也是vue2.0不可忽視的變化，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了vue3 element-plus如何使用icon圖標組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue用@表示src文件夾，引入時找文件路徑更方便,下面這篇文章主要給大家介紹了關于vue配置根目錄(用@代表src目錄)的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
nuxt框架中對vuex進行模塊化設置的實現(xiàn)方法
這篇文章主要介紹了nuxt框架中對vuex進行模塊化設置的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了使用vue3搭建后臺系統(tǒng)的過程記錄,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08