如何在vue.js中引入百度地圖jsApi？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

10年積累的網(wǎng)站設(shè)計制作、網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有松嶺免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

第一種方法是通過直接引入的方法，當(dāng)然除了引入script標簽還不夠，要想在vue文件中使用bmap對象，還需要在webpack的配置文件中，設(shè)置外部擴展(externals屬性)

//webpack.dev.conf.js

externals: {
  'BaiduMap': 'BMap'
}

externales屬性來自官方的解釋是:

防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。

webpack文檔也給出了一個示例：從 cdn 引入 jQuery，而不是把它打包。

index.html

<script
 src="https://code.jquery.com/jquery-3.1.0.js"
 integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
 crossorigin="anonymous">
</script>

webpack.config.js

externals: {
 jquery: 'jQuery'
}

import $ from 'jquery';

$('.my-element').animate(...);

參考這個實例，我們就可以在我們的項目中通過引入js文件的方法，直接使用百度地圖的api。

import BaiduMap from 'BaiduMap'
export default {
  name: 'Index',
  .....

mounted() {
    
  var map = new BaiduMap.Map('allmap')            // 創(chuàng)建地圖實例
  var point = new BaiduMap.Point(120.343373,31.540212)    // 創(chuàng)建中心點坐標
  var marker = new BaiduMap.Marker(point) // 創(chuàng)建標注

  map.centerAndZoom(point,15)             // 初始化地圖，設(shè)置中心點坐標和地圖級別


  map.addOverlay(marker) // 將標注添加到地圖中

}

注意這里，實例化地圖api，最好要在mounted階段進行，如果你的dom中采用的是官方的示例如

<div id="allmap"></div>

因為只有在mounted的階段，dom才會生成并掛載。

通過模塊化引入的方法

實際上百度地圖官方去年已經(jīng)開源了基于jsApi的vue和react的對應(yīng)開源組件，我們可以直接通過npm安裝，然后使用。

VUE:https://github.com/Dafrok/vue-baidu-map

React: https://github.com/huiyan-fe/react-bmap

可參考它們在github上面的文檔進行使用。這里只介紹下vue的。

安裝

npm i vue-baidu-map --save

初始化

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
 ak: 'YOUR_APP_KEY'  //這個地方是官方提供的ak密鑰
})

使用

<template>
 <baidu-map class="map">
 </baidu-map>
</template>

<style>
/* The container of BaiduMap must be set width & height. */
.map {
 width: 100%;
 height: 300px;
}
</style>

看完上述內(nèi)容，你們掌握如何在vue.js中引入百度地圖jsApi的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享標題：如何在vue.js中引入百度地圖jsApi
URL網(wǎng)址：http://jinyejixie.com/article12/ghphdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站內(nèi)鏈、營銷型網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站設(shè)計公司、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)