需求：vue中常常用到在弹框里显示百度地图，并根据定位坐标给地图创建标注，创建围栏等。以下代码的一些ui使用的是element-ui框架
1.引入对应的百度地图css, js文件
<!--百度map key-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ESaDPCg7kmtxOLL5NGKHkA4sspxasyXG"></script>
<!--画图，多边形-->
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<!--点聚合-->
<script type="text/javascript" src="/public/plugins/bmap/TextIconOverlay.js"></script>
<script type="text/javascript" src="/public/plugins/bmap/MarkerClusterer.js"></script>
2.在Vue中将百度地图弹框定义成一个map组件
Vue.component('baidu-map', {
template: '<div v-show="dialogBaidu"><div class="v-modal" tabindex="0" style="z-index: 122;"></div>'+
'<div class="el-dialog__wrapper" style="z-index: 1000;">'+
' <div class="el-dialog" style="margin-top: 15vh;">'+
' <div class="el-dialog__header">'+
' <span class="el-dialog__title ">{{title}}</span>'+
' <button type="button " @click="dialogBaidu=false;" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>'+
' </div>'+
' <div class="el-dialog__body">'+
' <div id="baidumap" style="height: 500px;"></div>'+
' </div>'+
' <div class="el-dialog__footer">'+
' <div class="dialog-footer">'+
' <button type="button " @click="dialogBaidu=false;" class="el-button el-button--primary">'+
' <span>关闭</span>'+
' </button>'+
' </div>'+
' </div>'+
' </div>'+
'</div></div>',
data: function () {
return {
MAP: null,
}
},
props: {
title: '',//弹框标题
lat: { //主定位点经度
type: String,
default: ''
},
lng: { //主定位点纬度
type: String,
default: ''
},
icon: { //主定位点标注的Icon图片
required: false,
type: String,
default: '/public/image/person_point.png'
},
showdialog: { // 是否显示弹框 true显示 false不显示
type: Boolean,
default: false
},
gpsArea: {//围栏集合
required: false,
type: Array,
default: function () {
return [];
}
},
markerIcon: { //标注集合icon图片
required: false,
type: String,
default: '/public/image/greencar.png'
},
markerPoints: {
//标注集合 [{'longitude': '114.02597366', 'latitude': '22.54605355'}]
required: false,
type: Array,
default: function () {
return [];
}
}
},
computed: {
'dialogBaidu': {
get: function () {
var self = this;
if (self.showdialog) {
//地图定位
self.theLocation();
}
return self.showdialog;
},
set: function (value) {
this.$parent.showdialog = value;
}
}
},
mounted: function () {
var self = this,
map = null;
map = new BMap.Map("baidumap"); // 创建Map实例
self.MAP = map;
map.centerAndZoom(new BMap.Point(114.02597366, 22.54605355), 15); // 初始化地图,设置中心点坐标和地图级别
map.setCurrentCity("深圳"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
},
methods: {
// 编写自定义函数,创建标注
createMarker: function (car, markerIcon) {
var self = this;
var marker = null;
var new_point = new BMap.Point(car.longitude, car.latitude);
if (markerIcon) {
var myIcon = new BMap.Icon(markerIcon, new BMap.Size(35, 35), {
imageOffset: new BMap.Size(0, 0)
});
marker = new BMap.Marker(new_point, { icon: myIcon });
} else {
marker = new BMap.Marker(new_point);
}
marker.setZIndex(-999);
return marker;
},
// 定位网点
theLocation: function() {
var self = this,
map = self.MAP,
//传过来的坐标需要去掉P 替换成. 比如114P02597366变成114.02597366
lat = (self.lat || '').replace(/P/g, '.'),
lng = (self.lng || '').replace(/P/g, '.'),
gpsArea = self.gpsArea, //网点坐标
markerIcon = self.markerIcon,
icon = self.icon;
var arr = []; // 取值坐标地址
setTimeout(function () {
if (lat && lng) {
map.clearOverlays();
var marker = self.createMarker({'longitude': lng, 'latitude': lat}, icon);
map.panTo(new BMap.Point(lng, lat));
map.addOverlay(marker); // 将标注添加到地图中
}
//创建点集合
var markers = self.markerPoints.map(function (place, index) {
return self.createMarker(place, markerIcon);
});
var markerClusterer = new BMapLib.MarkerClusterer(map, {
markers: markers,
girdSize: 100,
maxZoom: 15,
minClusterSize: 100
});
//创建围栏
if(gpsArea.length && gpsArea.length>0){
var poi = new BMap.Point(gpsArea[0]['lng'], gpsArea[0]['lat']);
map.centerAndZoom(poi, 18);
}
if(gpsArea){
gpsArea.forEach(item => {
arr.push(new BMap.Point(item.lng, item.lat));
});
}
if((arr instanceof Array) && arr.length > 0){
var polygon = new BMap.Polygon(arr, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5, strokeZIndex: 900}); //创建多边形
map.addOverlay(polygon); //增加多边形
polygon.enableEditing();
}
}, 500);
},
}
});
3.页面引用组件,并传入对应的参数
<el-button @click="theLocation({'latitude':detailData.car_latitude,'longitude':detailData.car_longitude,'icon': '/public/image/car_point.png','gps_area':car_parking_area })" type="success" >显示百度地图弹框</el-button>
<!-- baidu map 显示组件 前四个参数必填 -->
<baidu-map
title="定位信息"
:lat="lat"
:lng="lng"
:showdialog="showdialog"
:icon="icon"
:gps-area="gps_area"
:marker-icon="'/public/image/place.png'"
:marker-points="near_places">
</baidu-map>
4.点击按钮，显示弹框
// js
theLocation: function(row) {
var self = this;
//vue中坐标的传递需要去掉. 替换成P 比如114.02597366变成114P02597366
self.lat = row.latitude.replace(/\./g, 'P'),
self.lng = row.longitude.replace(/\./g, 'P'),
self.gps_area = row.gps_area, //网点坐标
self.icon = row.icon;
self.showdialog = true;
},
网友评论