vue和谷歌地图，百度地图开发

vue+Amap || vue+Bmap

1.在webpack中加入配置

externals: {
 /* "BMap": "BMap",
  "BMapLib": "BMapLib",*/
  "AMap": "window.AMap",
  "AMapUI": "AMapUI"
}

2.在页面中配置

 <!--百度地图api-->
<!-- <script src="http://api.map.baidu.com/api?v=2.0&ak=OjFCr32PIqozyNKLXTyQDdmefVzam2Ey"></script>
 <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
 <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />-->
 <!--高德地图-->
 <script src="//webapi.amap.com/maps?v=1.3&key=3455531464dfdc62bcf09689d07daa9f"></script>
 <script src="//webapi.amap.com/ui/1.0/main.js"></script>

3.在vue组件中的生命周期函数 mounted()中初始化地图

Amap

mounted() {
  this.map = new AMap.Map("map", Object.assign({}, this.mapDefault, this.mapConfig));
  this.initPlugin();
  this.initMapConfig();
}

Bmap

mounted() {
  let map = new BMap.Map("map", {
    minZoom: this.mapConfig.zoom[0] ? this.mapConfig.zoom[0] : 3,
    maxZoom: this.mapConfig.zoom[1] ? this.mapConfig.zoom[1] : 19,
    mapType: this.mapType[this.mapConfig.mapType] ? this.mapType[this.mapConfig.mapType] : this.mapType.normal
  });
  this.map = map;
  this.initMapConfig();
  this.initMapEvent();
}