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

2019-11-19 12:09:18

字體：大中小

來源：轉載

供稿：網友

（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文件內添加external選項，在module.exports內部，和entry平級；

externals: {  "BMap": "BMap" },

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

a）使用BMap的時候需要import (經過本人測試，如果不用import會提示BMap未定義)

b）注意一定要給bmap的div設置高度，否則會看不見

該組件的代碼如下

<!-- 頁面模版 --><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: '網點詳情',   toLink: '/SalesOutlets'  } }), created () {  // 組件創建完后獲取數據，這里和1.0不一樣，改成了這個樣子  this.loadMap()  // this.ready() // 如果在此處直接調用this.ready()方法，將無法加載地圖 }, 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() // 允許自動調節窗體大小   map.clearOverlays() // 清空原來的標注   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) // 創建標注，為要查詢的地方對應的經緯度    map.addOverlay(marker)   })   localSearch.search(this.$route.params.addr)  } }}</script><style> /* 去掉地圖左下角的百度LOGO */ .anchorBL {  display:none }</style>

如果直接在實例生命周期的created中調用this.ready()方法將無法加載地圖，我在index.html中加入了一個id為allmap的div，當我調用該組件時，該組件上的div沒有顯示地圖，而index.html中id為allmap的div里卻顯示了地圖，經過測試我猜測是因為該組件還沒有初始化完畢，導致new BMap.Map('allmap')時實例化地圖對象失敗。所以應該在實例生命周期的mounted中調用this.ready()方法。

實例生命周期參見：https://cn.vuejs.org/v2/guide/instance.html

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