vue.js下引入百度地圖jsApi的兩種方法

vue.js下引入百度地圖jsApi的兩種方法

前言

今天有個項目須要用到百度地圖，通常咱們在移動端使用百度地圖，都是直接經過這樣的方式，直接引入百度地圖的jsApi。

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

這種方法的原理，就是直接給全局widow對象添加一個BMap對象，從而能夠使咱們在已經加載api的頁面的任何地方，使用百度地圖的api。可是單單經過引入的方法，對於使用單文件組件的vue+webpack開發的項目，顯然是不夠的。因而，經過網上查資料。這裏找到了兩種方法。

直接引入script標籤

第一種方法是經過直接引入的方法，固然除了引入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中採用的是官方的示例如

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

由於只有在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>