|
|
|
@ -8,7 +8,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div id="mapFencecontainer" class="mapBox">
|
|
|
|
|
<div class="mapBtn">
|
|
|
|
|
<!-- <el-button size="small" type="danger" @click="delpolygon()">删除多边形</el-button> -->
|
|
|
|
|
<el-button size="small" type="danger" @click="delpolygon()">删除多边形</el-button>
|
|
|
|
|
<el-button size="small" type="danger" @click="clearOverlays()">清除</el-button>
|
|
|
|
|
<el-button size="small" type="primary" @click="sendLngLat">确认</el-button>
|
|
|
|
|
<!-- <el-button size="small" type="primary" @click="sendMsg">返回</el-button> -->
|
|
|
|
@ -77,12 +77,15 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
// 地图初始化
|
|
|
|
|
init() {
|
|
|
|
|
const lat = this.position.lat
|
|
|
|
|
const lng = this.position.lng
|
|
|
|
|
const lat = '34.81098454894641' || this.position.lat
|
|
|
|
|
const lng = '113.64789962768555' || this.position.lng
|
|
|
|
|
map = new qq.maps.Map(document.getElementById('mapFencecontainer'), {
|
|
|
|
|
center: new qq.maps.LatLng(lat, lng), // 暂时默认郑州
|
|
|
|
|
zoom: 22
|
|
|
|
|
});
|
|
|
|
|
qq.maps.event.addListener(map, "click", function (event) {
|
|
|
|
|
console.log('您点击的位置为: [' + event.latLng.getLat() + ', ' + event.latLng.getLng() + ']');
|
|
|
|
|
});
|
|
|
|
|
// 多边形绘制及回显
|
|
|
|
|
// 设置多边形路径以便回显
|
|
|
|
|
// path4 = [];
|
|
|
|
@ -93,7 +96,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
console.log(path4);
|
|
|
|
|
this.showpolygon(path4);
|
|
|
|
|
// 绘制
|
|
|
|
|
// 绘制,操作
|
|
|
|
|
this.addpolygon();
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
@ -136,6 +139,7 @@ export default {
|
|
|
|
|
drawingManager.setMap(map);
|
|
|
|
|
qq.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
|
|
|
|
|
// clearOverlays(overlaysArray)
|
|
|
|
|
console.log('event',event); // 获得相应的经纬度值
|
|
|
|
|
lngLat = [];
|
|
|
|
|
overlaysArray.push(event.overlay);
|
|
|
|
|
for (const item of event.overlay.getPath().elems) {
|
|
|
|
@ -147,9 +151,14 @@ export default {
|
|
|
|
|
lng: lng
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
console.log('overlaycomplete',lngLat, overlaysArray); // 获得相应的经纬度值
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
console.log('overlaycomplete',lngLat); // 获得相应的经纬度值
|
|
|
|
|
qq.maps.event.addListener(drawingManager, 'markercomplete', function (event) {
|
|
|
|
|
console.log('markercomplete', event); // 获得相应的经纬度值
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
// 初始化回显
|
|
|
|
|
showpolygon(path3) {
|
|
|
|
|