|
|
|
@ -21,7 +21,7 @@
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let map, marker, polygon, drawingManager, lngLat; // 地图,坐标点,多边形初始化加载,多边形绘制,多边形每个点的集成数组
|
|
|
|
|
const markersArray = []; let overlaysArray = []; // 标注点集合,绘制多边形时的集合
|
|
|
|
|
let overlaysArray = []; // 标注点集合,绘制多边形时的集合
|
|
|
|
|
let path4 = [];// 设置回显数据参数
|
|
|
|
|
// 默认展示假数据回显参数
|
|
|
|
|
let arr = [{ 'lat': 34.80506482194067, 'lng': 113.59760284423828 },
|
|
|
|
@ -44,7 +44,7 @@ let arr = [{ 'lat': 34.80506482194067, 'lng': 113.59760284423828 },
|
|
|
|
|
{ 'lat': 34.81098454894641, 'lng': 113.64789962768555 },
|
|
|
|
|
{ 'lat': 34.81366238099493, 'lng': 113.62936019897461 }]; // 用于数据回显的假数据 后期会调用接口返回数据
|
|
|
|
|
export default {
|
|
|
|
|
props: ['position'],
|
|
|
|
|
props: ['position', 'areaMapInfo'],
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
longitude: '',
|
|
|
|
@ -73,6 +73,7 @@ export default {
|
|
|
|
|
lngLat = path4;
|
|
|
|
|
}
|
|
|
|
|
console.log('确认', lngLat)
|
|
|
|
|
this.$emit('areaVisibleChange', false, lngLat);
|
|
|
|
|
},
|
|
|
|
|
// 地图初始化
|
|
|
|
|
init() {
|
|
|
|
@ -80,11 +81,8 @@ export default {
|
|
|
|
|
const lng = this.position.lng
|
|
|
|
|
map = new qq.maps.Map(document.getElementById('mapFencecontainer'), {
|
|
|
|
|
center: new qq.maps.LatLng(lat, lng), // 暂时默认郑州
|
|
|
|
|
zoom: 13
|
|
|
|
|
zoom: 22
|
|
|
|
|
});
|
|
|
|
|
// 标注的生成与回显
|
|
|
|
|
this.addMarker(new qq.maps.LatLng(lat, lng)); // 初始化回显标注
|
|
|
|
|
this.markerOnly();
|
|
|
|
|
// 多边形绘制及回显
|
|
|
|
|
// 设置多边形路径以便回显
|
|
|
|
|
// path4 = [];
|
|
|
|
@ -98,42 +96,6 @@ export default {
|
|
|
|
|
// 绘制
|
|
|
|
|
this.addpolygon();
|
|
|
|
|
},
|
|
|
|
|
// 添加监听事件 获取鼠标单击事件(仅留一个标注点)
|
|
|
|
|
markerOnly() {
|
|
|
|
|
qq.maps.event.addListener(map, 'click', function (event) {
|
|
|
|
|
this.addMarker(event.latLng);
|
|
|
|
|
qq.maps.event.addListener(map, 'click', function (event) {
|
|
|
|
|
this.deleteOverlays(); // 删除原有标注仅留下一个
|
|
|
|
|
marker = new qq.maps.Marker({
|
|
|
|
|
position: event.latLng,
|
|
|
|
|
map: map
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
var gps = event.latLng.getLat() + ',' + event.latLng.getLng(); // 解析出来的点方便给后端
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 添加标记
|
|
|
|
|
addMarker(location) {
|
|
|
|
|
this.deleteOverlays();
|
|
|
|
|
var marker = new qq.maps.Marker({
|
|
|
|
|
position: location,
|
|
|
|
|
map: map
|
|
|
|
|
});
|
|
|
|
|
markersArray.push(marker);
|
|
|
|
|
},
|
|
|
|
|
// 删除标记
|
|
|
|
|
deleteOverlays() {
|
|
|
|
|
if (markersArray) {
|
|
|
|
|
// for (i in markersArray) {
|
|
|
|
|
for (var i = 0; i < markersArray.length; i++) {
|
|
|
|
|
markersArray[i].setMap(null);
|
|
|
|
|
}
|
|
|
|
|
markersArray.length = 0;
|
|
|
|
|
}
|
|
|
|
|
if (marker !== undefined) {
|
|
|
|
|
marker.setMap(null);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 多边形绘制
|
|
|
|
|
*/
|
|
|
|
@ -144,16 +106,12 @@ export default {
|
|
|
|
|
drawingControl: true,
|
|
|
|
|
drawingControlOptions: {
|
|
|
|
|
position: qq.maps.ControlPosition.TOP_CENTER,
|
|
|
|
|
// drawingModes: [
|
|
|
|
|
// qq.maps.drawing.OverlayType.POLYGON
|
|
|
|
|
// ]
|
|
|
|
|
// 表头显示区域
|
|
|
|
|
drawingModes: [
|
|
|
|
|
qq.maps.drawing.OverlayType.MARKER,
|
|
|
|
|
qq.maps.drawing.OverlayType.CIRCLE,
|
|
|
|
|
// qq.maps.drawing.OverlayType.CIRCLE,
|
|
|
|
|
qq.maps.drawing.OverlayType.POLYGON,
|
|
|
|
|
qq.maps.drawing.OverlayType.POLYLINE,
|
|
|
|
|
qq.maps.drawing.OverlayType.RECTANGLE
|
|
|
|
|
// qq.maps.drawing.OverlayType.POLYLINE,
|
|
|
|
|
// qq.maps.drawing.OverlayType.RECTANGLE
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
markerOptions: {
|
|
|
|
@ -166,13 +124,13 @@ export default {
|
|
|
|
|
fillColor: new qq.maps.Color(202, 67, 58, 0.1),
|
|
|
|
|
clickable: false
|
|
|
|
|
},
|
|
|
|
|
// 圆形样式
|
|
|
|
|
circleOptions: {
|
|
|
|
|
fillColor: new qq.maps.Color(255, 208, 70, 0.3),
|
|
|
|
|
strokeColor: new qq.maps.Color(88, 88, 88, 1),
|
|
|
|
|
strokeWeight: 3,
|
|
|
|
|
clickable: false
|
|
|
|
|
}
|
|
|
|
|
// // 圆形样式
|
|
|
|
|
// circleOptions: {
|
|
|
|
|
// fillColor: new qq.maps.Color(255, 208, 70, 0.3),
|
|
|
|
|
// strokeColor: new qq.maps.Color(88, 88, 88, 1),
|
|
|
|
|
// strokeWeight: 3,
|
|
|
|
|
// clickable: false
|
|
|
|
|
// }
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
drawingManager.setMap(map);
|
|
|
|
|