這篇文章要跟大家介紹的文章內容是關於vue.js下如何引入百度地圖的jsApi？引入百度地圖的jsApi的兩種方法介紹，有很好的參考價值，希望可以幫助到有需要的朋友。
今天有個專案需要用到百度地圖，一般我們在行動端使用百度地圖，都是直接透過這樣的方式，直接引入百度地圖的jsApi。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script>
這種方法的原理，就是直接為全域widow物件添加一個BMap對象，從而可以使我們在已經載入api的頁面的任何地方，使用百度地圖的api。但是單單透過引入的方法，對於使用單一檔案元件的vue webpack開發的項目，顯然是不夠的。於是，透過網路上查資料。這裡找到了兩種方法。
第一種方法是透過直接引入的方法，當然除了引入script標籤還不夠，要想在vue檔案中使用bmap對象，還需要在webpack的在設定檔中，設定外部擴充(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') // 创建地图实例
var point = new BaiduMap.Point(120.343373,31.540212) // 创建中心点坐标
var marker = new BaiduMap.Marker(point) // 创建标注
map.centerAndZoom(point,15) // 初始化地图，设置中心点坐标和地图级别
map.addOverlay(marker) // 将标注添加到地图中
}注意這裡，實例化地圖api，最好要在mounted階段進行，如果你的dom中採用的是官方的示例如
<p id="allmap"></p>
因為只有在mounted的階段，dom才會產生並掛載。
實際上百度地圖官方去年已經開源了基於jsApi的vue和react的對應開源元件，我們可以直接透過npm安裝，然後使用。
VUE:[https://github.com/Dafrok/vue...]
React:[https://github.com/huiyan-fe/...]
可參考它們在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>相關推薦：
vue怎麼封裝元件？ vue tab切換元件封裝的方法（附程式碼）
以上是vue.js下如何引進百度地圖的jsApi？引入百度地圖的jsApi的兩種方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
