|
|
|
@ -24,25 +24,58 @@ let map, marker, polygon, drawingManager, lngLat; // 地图,坐标点,多边
|
|
|
|
|
let overlaysArray = []; // 标注点集合,绘制多边形时的集合
|
|
|
|
|
let path4 = [];// 设置回显数据参数
|
|
|
|
|
// 默认展示假数据回显参数
|
|
|
|
|
let arr = [{ 'lat': 34.80506482194067, 'lng': 113.59760284423828 },
|
|
|
|
|
{ 'lat': 34.780394716350614, 'lng': 113.59365463256836 },
|
|
|
|
|
{ 'lat': 34.760794345237514, 'lng': 113.58541488647461 },
|
|
|
|
|
{ 'lat': 34.7330074293797, 'lng': 113.58455657958984 },
|
|
|
|
|
{ 'lat': 34.70281206762318, 'lng': 113.61854553222656 },
|
|
|
|
|
{ 'lat': 34.70027176815597, 'lng': 113.62884521484375 },
|
|
|
|
|
{ 'lat': 34.6987193245323, 'lng': 113.63296508789062 },
|
|
|
|
|
{ 'lat': 34.69914272113635, 'lng': 113.63880157470703 },
|
|
|
|
|
{ 'lat': 34.699001589175694, 'lng': 113.64498138427734 },
|
|
|
|
|
{ 'lat': 34.698578191849535, 'lng': 113.68309020996094 },
|
|
|
|
|
{ 'lat': 34.73907339121123, 'lng': 113.68206024169922 },
|
|
|
|
|
{ 'lat': 34.738932327388824, 'lng': 113.6920166015625 },
|
|
|
|
|
{ 'lat': 34.76319176276739, 'lng': 113.69218826293945 },
|
|
|
|
|
{ 'lat': 34.763050740134055, 'lng': 113.70386123657227 },
|
|
|
|
|
{ 'lat': 34.7864571976711, 'lng': 113.70214462280273 },
|
|
|
|
|
{ 'lat': 34.786739162702524, 'lng': 113.68206024169922 },
|
|
|
|
|
{ 'lat': 34.809997957307736, 'lng': 113.68223190307617 },
|
|
|
|
|
{ 'lat': 34.81098454894641, 'lng': 113.64789962768555 },
|
|
|
|
|
{ 'lat': 34.81366238099493, 'lng': 113.62936019897461 }]; // 用于数据回显的假数据 后期会调用接口返回数据
|
|
|
|
|
let arr = [
|
|
|
|
|
{
|
|
|
|
|
name: '商户1',
|
|
|
|
|
editable: true,
|
|
|
|
|
mapInfo: [
|
|
|
|
|
{
|
|
|
|
|
mapName: '区域1',
|
|
|
|
|
areaDot: [
|
|
|
|
|
{
|
|
|
|
|
"lat": 34.81183810359681,
|
|
|
|
|
"lng": 113.64705095998943
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 34.81134040998215,
|
|
|
|
|
"lng": 113.64699731580913
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 34.81148135007192,
|
|
|
|
|
"lng": 113.64640722982585
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 34.811912977597295,
|
|
|
|
|
"lng": 113.646434051916
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '商户2',
|
|
|
|
|
editable: false,
|
|
|
|
|
mapInfo: [
|
|
|
|
|
{
|
|
|
|
|
mapName: '区域1',
|
|
|
|
|
areaDot: [
|
|
|
|
|
{
|
|
|
|
|
"lat": 34.811776442604156,
|
|
|
|
|
"lng": 113.64557038061321
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 34.81182048617505,
|
|
|
|
|
"lng": 113.64621411077678
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"lat": 34.81198344718268,
|
|
|
|
|
"lng": 113.64581714384258
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]; // 用于数据回显的假数据 后期会调用接口返回数据
|
|
|
|
|
export default {
|
|
|
|
|
props: ['position', 'areaMapInfo'],
|
|
|
|
|
data() {
|
|
|
|
@ -88,14 +121,21 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
// 多边形绘制及回显
|
|
|
|
|
// 设置多边形路径以便回显
|
|
|
|
|
// path4 = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
arr.forEach(item => {
|
|
|
|
|
path4.push(new qq.maps.LatLng(item.lat, item.lng));
|
|
|
|
|
// 商户
|
|
|
|
|
item.mapInfo.forEach(e => {
|
|
|
|
|
// 多个区域
|
|
|
|
|
path4 = [];
|
|
|
|
|
e.areaDot.forEach(q => {
|
|
|
|
|
path4.push(new qq.maps.LatLng(q.lat, q.lng));
|
|
|
|
|
})
|
|
|
|
|
this.showpolygon(path4, item.editable);
|
|
|
|
|
console.log(JSON.stringify(path4, null, 2))
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
console.log(path4);
|
|
|
|
|
this.showpolygon(path4);
|
|
|
|
|
// 绘制,操作
|
|
|
|
|
this.addpolygon();
|
|
|
|
|
},
|
|
|
|
@ -111,10 +151,7 @@ export default {
|
|
|
|
|
position: qq.maps.ControlPosition.TOP_CENTER,
|
|
|
|
|
// 表头显示区域
|
|
|
|
|
drawingModes: [
|
|
|
|
|
// qq.maps.drawing.OverlayType.CIRCLE,
|
|
|
|
|
qq.maps.drawing.OverlayType.POLYGON,
|
|
|
|
|
// qq.maps.drawing.OverlayType.POLYLINE,
|
|
|
|
|
// qq.maps.drawing.OverlayType.RECTANGLE
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
markerOptions: {
|
|
|
|
@ -127,13 +164,6 @@ 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
|
|
|
|
|
// }
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
drawingManager.setMap(map);
|
|
|
|
@ -150,21 +180,18 @@ export default {
|
|
|
|
|
lat: lat,
|
|
|
|
|
lng: lng
|
|
|
|
|
});
|
|
|
|
|
console.log(JSON.stringify(lngLat, null, 2))
|
|
|
|
|
}
|
|
|
|
|
console.log('overlaycomplete',lngLat, overlaysArray); // 获得相应的经纬度值
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
qq.maps.event.addListener(drawingManager, 'markercomplete', function (event) {
|
|
|
|
|
console.log('markercomplete', event); // 获得相应的经纬度值
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 初始化回显
|
|
|
|
|
showpolygon(path3) {
|
|
|
|
|
showpolygon(path3, editable) {
|
|
|
|
|
polygon = new qq.maps.Polygon({
|
|
|
|
|
map: map,
|
|
|
|
|
editable: true,
|
|
|
|
|
editable,
|
|
|
|
|
clickable: true,
|
|
|
|
|
strokeColor: new qq.maps.Color(202, 67, 58, 0.8),
|
|
|
|
|
fillColor: new qq.maps.Color(202, 67, 58, 0.1)
|
|
|
|
|
});
|
|
|
|
@ -189,7 +216,7 @@ export default {
|
|
|
|
|
overlaysArray = []; // 需要重置为空,否则之前的数据还在这个数组里面
|
|
|
|
|
lngLat = [];
|
|
|
|
|
console.log(drawingManager);
|
|
|
|
|
this.init();
|
|
|
|
|
// this.init();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|