Vue系列：如何将百度地图包装成Vue的组件

2022-08-27 18:43:14

主要分解为如下步骤：

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

（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>
<script>
exportdefault{
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>

<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#资源命名约定

码农公寓