前言
今天有個項目需要用到百度地圖，一般我們在移動端使用百度地圖，都是直接通過這樣的方式，直接引入百度地圖的jsApi。
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script>
這種方法的原理，就是直接給全局widow對象添加一個BMap對象，從而可以使我們在已經(jīng)加載api的頁面的任何地方，使用百度地圖的api。但是單單通過引入的方法，對于使用單文件組件的vue+webpack開發(fā)的項目，顯然是不夠的。于是，通過網(wǎng)上查資料。這里找到了兩種方法。
直接引入script標(biāo)簽
第一種方法是通過直接引入的方法，當(dāng)然除了引入script標(biāo)簽還不夠，要想在vue文件中使用bmap對象，還需要在webpack的配置文件中，設(shè)置外部擴(kuò)展(externals屬性)
//webpack.dev.conf.jsexternals: { 'BaiduMap': 'BMap'}externales屬性來自官方的解釋是:
防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴(kuò)展依賴(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)建中心點坐標(biāo) var marker = new BaiduMap.Marker(point) // 創(chuàng)建標(biāo)注 map.centerAndZoom(point,15) // 初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別 map.addOverlay(marker) // 將標(biāo)注添加到地圖中}注意這里，實例化地圖api，最好要在mounted階段進(jìn)行，如果你的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上面的文檔進(jìn)行使用。這里只介紹下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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
