快捷導(dǎo)航

如何將百度地圖包裝成Vue的組件的方法步驟

更新時(shí)間：2019年02月12日 15:00:16 作者：日出東方VS唯我不敗

這篇文章主要介紹了如何將百度地圖包裝成Vue的組件的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

（1）在index.html文件中引入百度地圖

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

（2）在webpack.base.conf.js文件內(nèi)添加external選項(xiàng)，在module.exports內(nèi)部，和entry平級(jí)；

externals: {
  "BMap": "BMap" 

},

（3）添加地圖組件BMapComponent.vue，這里主要注意兩點(diǎn)：

a）使用BMap的時(shí)候需要import (經(jīng)過(guò)本人測(cè)試，如果不用import會(huì)提示BMap未定義)

b）注意一定要給bmap的div設(shè)置高度，否則會(huì)看不見(jiàn)

該組件的代碼如下

<!-- 頁(yè)面模版 -->
<template>
 <div>
  <!--header-->
  <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header>
  <!--header end-->
 
  <!--container-->
  <div id="allmap" 
      style="
        width: 100%; 
        height:200px; 
        border: 1px solid gray;
        overflow:hidden;">
    </div>
  <!--container end-->
 </div>
</template>
<script>
import comHeader from 'components/comHeader'
import BMap from 'BMap'
export default {
 components: {
  comHeader
 },
 data: () => ({
  headerData: {
   title: '網(wǎng)點(diǎn)詳情',
   toLink: '/SalesOutlets'
  }
 }),
 created () {
  // 組件創(chuàng)建完后獲取數(shù)據(jù)，這里和1.0不一樣，改成了這個(gè)樣子
  this.loadMap()
  // this.ready() // 如果在此處直接調(diào)用this.ready()方法，將無(wú)法加載地圖
 },
 mounted () {
  this.ready()
 },
 methods: {
  loadMap: function () {
   console.log(this.$route.params.name)
   console.log(this.$route.params.addr)
   console.log(this.$route.params.phone)
   // setTimeout(this.ready, 0)
  },
  ready: function () {
   var map = new BMap.Map('allmap')
   map.enableScrollWheelZoom(true)
   console.log(map)
 
   var localSearch = new BMap.LocalSearch(map)
   // localSearch.enableAutoViewport() // 允許自動(dòng)調(diào)節(jié)窗體大小
   map.clearOverlays() // 清空原來(lái)的標(biāo)注
   localSearch.setSearchCompleteCallback(function (searchResult) {
    var poi = searchResult.getPoi(0)
    map.centerAndZoom(poi.point, 20)
    var point = new BMap.Point(poi.point.lng, poi.point.lat)
    var marker = new BMap.Marker(point) // 創(chuàng)建標(biāo)注，為要查詢的地方對(duì)應(yīng)的經(jīng)緯度
    map.addOverlay(marker)
   })
   localSearch.search(this.$route.params.addr)
  }
 }
}
</script>
<style>
 /* 去掉地圖左下角的百度LOGO */
 .anchorBL {
  display:none
 }
</style>

如果直接在實(shí)例生命周期的created中調(diào)用this.ready()方法將無(wú)法加載地圖，我在index.html中加入了一個(gè)id為allmap的div，當(dāng)我調(diào)用該組件時(shí)，該組件上的div沒(méi)有顯示地圖，而index.html中id為allmap的div里卻顯示了地圖，經(jīng)過(guò)測(cè)試我猜測(cè)是因?yàn)樵摻M件還沒(méi)有初始化完畢，導(dǎo)致new BMap.Map('allmap')時(shí)實(shí)例化地圖對(duì)象失敗。所以應(yīng)該在實(shí)例生命周期的mounted中調(diào)用this.ready()方法。

實(shí)例生命周期參見(jiàn)：https://cn.vuejs.org/v2/guide/instance.html

（4）在父組件中使用
a）引入 import BMapComponent from './components/BMapComponent.vue'
b）在template中增加標(biāo)簽