快捷導(dǎo)航

2種在vue項(xiàng)目中使用百度地圖的簡(jiǎn)單方法

更新時(shí)間：2018年09月28日 15:12:20 投稿：laozhang

在本篇文章中我們給大家整理了2種關(guān)于VUE項(xiàng)目中使用百度地圖的最簡(jiǎn)單的方法，非常實(shí)用，一起來(lái)學(xué)習(xí)下。

地圖在項(xiàng)目中用得很多，最近也用了幾次，好長(zhǎng)時(shí)間不用都記不清了，閑暇時(shí)整理了vue里使用百度地圖的2種方法，方便自己查看，也分享給大家，希望可以幫助有需要的人。

普遍的方法是：

1.index.html 中引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"></script>

2.新建個(gè)組件maps

注意：不要把組件命名為map，因?yàn)閔tml中有map標(biāo)簽，會(huì)報(bào)錯(cuò)

報(bào)錯(cuò)：Do not use built-in or reserved HTML elements as component id:map

3.然后就可以直接再組件了寫(xiě)相關(guān)代碼了

mounted(){
   var map = new BMap.Map('map')
   var point = new BMap.Point(108.840053, 34.129522)
   map.centerAndZoom(point, 14)
   //...
  }

另一個(gè)方法：

1.新建一個(gè)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頁(yè)面中引入

import {MP} from './map.js'

3.在vue頁(yè)面中調(diào)用

data:{
  return{
    ak:'1287348913029483740293'//密鑰
  }
},
mounted(){
  this.$nextTick(function(){
   var _this = this;
   MP(_this.ak).then(BMap => {
    //在此調(diào)用api
   })
  }
}

您可能感興趣的文章:

相關(guān)文章

Vue生命周期示例詳解
這篇文章主要為大家詳細(xì)介紹了Vue生命周期的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間淺析
這篇文章主要給大家介紹了關(guān)于vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間，以及vue時(shí)間戳獲取本地時(shí)間實(shí)時(shí)更新的相關(guān)資料，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能
在Vue3項(xiàng)目中集成Video.js庫(kù),可以創(chuàng)建強(qiáng)大的視頻播放功能,這篇文章主要介紹了如何在Vue3中使用視頻庫(kù)Video.js實(shí)現(xiàn)視頻播放功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
vue3使用拖拽組件draggable.next的保姆級(jí)教程
做項(xiàng)目的時(shí)候遇到了一個(gè)需求,拖拽按鈕到指定位置，添加一個(gè)輸入框,這篇文章主要給大家介紹了關(guān)于vue3使用拖拽組件draggable.next的保姆級(jí)教程,需要的朋友可以參考下
2023-06-06
Vue.js 實(shí)現(xiàn)地址管理頁(yè)面思路詳解(地址添加、編輯、刪除和設(shè)置默認(rèn)地址)
這篇文章主要介紹了Vue.js 實(shí)現(xiàn)地址管理頁(yè)面的思路(地址添加、編輯、刪除和設(shè)置默認(rèn)地址),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-12-12
Vue中router-view無(wú)法顯示的解決辦法
這篇文章主要給大家介紹了關(guān)于Vue中router-view無(wú)法顯示的解決辦法,router-view組件作為vue最核心的路由管理組件,在項(xiàng)目中作為路由管理經(jīng)常被使用到,需要的朋友可以參考下
2023-07-07
vue webuploader 文件上傳組件開(kāi)發(fā)
本篇文章主要介紹了vue webuploader 文件上傳組件開(kāi)發(fā)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
對(duì)VUE中的對(duì)象添加屬性
今天小編就為大家分享一篇對(duì)VUE中的對(duì)象添加屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
socket io與vue-cli的結(jié)合使用的示例代碼
這篇文章主要介紹了socket io與vue-cli的結(jié)合使用的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
vuex 實(shí)現(xiàn)getter值賦值給vue組件里的data示例
今天小編就為大家分享一篇vuex 實(shí)現(xiàn)getter值賦值給vue組件里的data示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11