Vue 框架中添加百度地图组件
1、在html文件中引入百度地图，
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fQRe6ynMMsc17qmOMKvNRol0bVDh32WZ" ></script>
v=2.0&ak=“地图秘钥”//百度地图申请秘钥
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" v-bind:style="mapStyle"></div>
</template>
export default {
props: {
//地图高度
mapHeight:{
type: Number,
default: 400
},
//经度
longitude:{
type: Number,
default: 121.360
},
//纬度
latitude:{
type: Number,
default: 31.225
},
//描述
description:{
type: String,
default:'上海市长宁区天山西路1068号联强国际广场D幢4层'
}
},
data() {
return {
mapStyle:{
width:'100%',
height:this.mapHeight +'px'
},
};
},
mounted() {
var map = new BMap.Map('allmap');
var point = new BMap.Point(this.longitude, this.latitude);
map.centerAndZoom(point, 15);
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
map.enableDoubleClickZoom(true);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var opts ={
width: 250,
height: 75,
title: '上海達豐机械租赁有限公司',
}
var infoWindow = new BMap.InfoWindow(this.description, opts);//创建信息窗口对象
marker.addEventListener("click", function(){
map.openInfoWindow(infoWindow, point);
});
map.openInfoWindow(infoWindow, point);//开启信息窗口
}
}
</script>
4、在父组件中使用：
a. import map from '../../components/map/map.vue';
b. 在template中增加标签
<el-map :mapHeight="mapHeight" :longitude="longitude" :latitude="latitude" :description="description"></el-map>
export default{
data(){
return{
height:300,
longitude: 121.360,
latitude: 31.2256,
}
},
componets:{
'el-map': map
},
}
