vue + 百度地圖api

主要分解爲以下步驟：

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

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

（2）在webpack.base.conf.js文件內添加external選項，在module.exports內部，和entry平級；

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

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

    a）使用BMap的時候不須要import了，import反而會報錯     

    b）注意必定要給bmap的div設置高度，不然會看不見

該組件的代碼以下

 

<template>
  <!--<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>-->
  <!--<div id="allmap":style="{width: '100%', height: mapHeight + 'px'}"></div>-->
  <div id="allmap" v-bind:style="mapStyle"></div>
</template>
<script>
  export default {
    data:function(){
      return{
        mapStyle:{
          width:'100%',
          height:this.mapHeight +'px'
        }
      }
    },
    props:{
      // 地圖在該視圖上的高度
      mapHeight:{
        type:Number,
        default:500
      },
      // 經度
      longitude:{
        type:Number,
        default:116.404
      },
      // 緯度
      latitude:{
        type:Number,
        default:39.915
      },
      description:{
        type:String,
        default:'天安門'
      }
    },
    ready:function(){
      var map =newBMap.Map("allmap");
      var point =newBMap.Point(this.longitude,this.latitude);
      var marker =newBMap.Marker(point);
      map.addOverlay(marker);
      map.centerAndZoom(point,15);
      // 信息窗的配置信息
      var opts ={
        width :250,
        height:75,
        title :"地址：",
      }
      var infoWindow =newBMap.InfoWindow(this.description, opts);// 建立信息窗口對象
      marker.addEventListener("click",function(){
        map.openInfoWindow(infoWindow,point);
      });
      map.enableScrollWheelZoom(true);
      map.openInfoWindow(infoWindow,point);//開啓信息窗口
    }
  }
</script>

<!--Add"scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

（4） 在父組件中使用

    a）引入 import BMapComponent from './components/BMapComponent.vue'

    b）在template中增長標籤

     

<b-map-component></b-map-component>

    注意這裏標籤的命名，在vue文檔中有說： http://vuejs.org.cn/guide/components.html#資源命名約定 

.