Vue框架中添加百度地图组件

申请百度地图密钥

百度地图

在index.html中添加百度地图JavaScript API接口

<!-- 在index.html中添加百度地图JavaScript API接口； --><script  type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥" ></script>

在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级；

// 在webpack.base.conf.js配置文件中配置BMap,(创建BMap对象)，在module.exports 中与entry平级；  externals: {    'BMap': 'BMap'  },  

在地图组件中import BMap，否则会出现”BMap undefined”；

// 导入BMap组件import BMap from 'BMap'

创建地图对象，在mounted生命周期调用

// 创建地图对象，在mounted生命周期调用；  mounted() {    this.ready()  },  methods: {    ready: function() {      var map = new BMap.Map('allmap')      var point = new BMap.Point(108.840053, 34.129522)      map.centerAndZoom(point, 14)      map.addControl(new BMap.MapTypeControl())      map.enableScrollWheelZoom(true)      map.enableDoubleClickZoom(true)      var marker = new BMap.Marker(point)      map.addOverlay(marker)      map.centerAndZoom(point, 15)    }  }