1
我已經從Ian Grainger這個例子(解決方案),但我添加了一個帶有內孔的多邊形。如何刪除多邊形的頂點(節點)與孔(谷歌地圖V3)
This example適用於外部頂點路徑,但不適用於內部頂點路徑。
我需要爲內部和外部節點實現事件監聽器,因爲在內部頂點上的火災事件時,刪除外部頂點。它行不通。
有人可以提供一些關於如何解決這個問題的例子嗎?
我已經從Ian Grainger這個例子(解決方案),但我添加了一個帶有內孔的多邊形。如何刪除多邊形的頂點(節點)與孔(谷歌地圖V3)
This example適用於外部頂點路徑,但不適用於內部頂點路徑。
我需要爲內部和外部節點實現事件監聽器,因爲在內部頂點上的火災事件時,刪除外部頂點。它行不通。
有人可以提供一些關於如何解決這個問題的例子嗎?
你的問題之一是其中有一個洞的多邊形有多個(在這種情況下是兩個)路徑,並且你沒有爲這兩個路徑上的改變添加監聽器。下面是一個概念證明,它不是完美的,有時標記是孤立的,但應該是一個起點。雙擊頂點下方的藍色標記以刪除它們(我無法讓您的「X」可靠地工作)。
updated proof of concept with white markers
代碼片段:
var G = google.maps;
var zoom = 8;
var centerPoint = new G.LatLng(37.286172, -121.80929);
var map;
$(function() {
// create options object
var myOptions = {
center: centerPoint,
zoom: zoom,
mapTypeId: G.MapTypeId.ROADMAP
};
// create map with options
map = new G.Map($("#map_canvas")[0], myOptions);
addPolygon(map);
});
function addPolygon(map) {
var paths = [
[new G.LatLng(37.686172, -122.20929),
new G.LatLng(37.696172, -121.40929),
new G.LatLng(36.706172, -121.40929),
new G.LatLng(36.716172, -122.20929),
new G.LatLng(37.686172, -122.20929)
],
[new G.LatLng(37.486172, -122.00929),
new G.LatLng(37.086172, -122.00929),
new G.LatLng(37.086172, -121.60929),
new G.LatLng(37.486172, -121.60929),
new G.LatLng(37.486172, -122.00929)
]
];
poly = new G.Polygon({
clickable: false,
paths: paths,
map: map
});
polygonBinder(poly);
poly.setEditable(true);
G.event.addListener(poly.getPaths().getAt(0), 'insert_at', addClickMarker0);
G.event.addListener(poly.getPaths().getAt(1), 'insert_at', addClickMarker1);
}
function polygonBinder(poly) {
poly.binder0 = new MVCArrayBinder(poly.getPaths().getAt(0));
poly.binder1 = new MVCArrayBinder(poly.getPaths().getAt(1));
poly.markers = [];
for (var i = 0; i < poly.getPaths().getLength(); i++) {
poly.markers[i] = [];
for (var j = 0; j < poly.getPaths().getAt(i).getLength(); j++) {
var mark = new G.Marker({
map: map,
icon: {
path: G.SymbolPath.CIRCLE,
scale: 8,
strokeWeight: 2,
strokeColor: 'blue',
fillColor: 'blue',
fillOpacity: 1
},
draggable: true,
title: "double click to delete [" + i + "," + j + "]",
position: poly.getPaths().getAt(i).getAt(j)
});
poly.markers[i][j] = mark;
mark.bindTo('position', poly["binder" + i], (j).toString());
G.event.addListener(mark, "dblclick", deleteMark);
}
}
}
function addClickMarker0(index) {
addClickMarker(index, 0);
}
function addClickMarker1(index) {
addClickMarker(index, 1);
}
function deleteMark(evt) {
var minDist = Number.MAX_VALUE;
var minPathIdx = -1;
var minIdx = -1;
var i, j;
for (i = 0; i < poly.getPaths().getLength(); i++) {
for (j = 0; j < poly.getPaths().getAt(i).getLength(); j++) {
var distance = G.geometry.spherical.computeDistanceBetween(evt.latLng, poly.getPaths().getAt(i).getAt(j));
if (distance < minDist) {
minDist = distance;
minPathIdx = i;
minIdx = j;
}
if (distance < 10) {
document.getElementById('info').innerHTML = "deleted path=" + i + " idx=" + j + " dist<10 minDist=" + minDist + " meters";
poly.getPaths().getAt(i).removeAt(j);
break;
}
}
}
if ((i == poly.getPaths().getLength()) && (j == poly.getPaths(i - 1).getLength())) {
poly.getPaths().getAt(minPathIdx).removeAt(minIdx);
document.getElementById('info').innerHTML = "deleted path=" + minPathIdx + " idx=" + minIdx + " dist=" + minDist + " meters";
}
this.setMap(null);
}
function addClickMarker(index, pathIdx) {
var path = this;
// rebind binder
for (var i = 0; i < poly.markers[pathIdx].length; i++) {
poly.markers[pathIdx][i].setMap(null);
}
poly.markers[pathIdx] = [];
for (var i = 0; i < poly.getPaths().getAt(pathIdx).getLength(); i++) {
var mark = new G.Marker({
map: map,
icon: {
path: G.SymbolPath.CIRCLE,
scale: 8,
strokeWeight: 2,
strokeColor: 'blue',
fillColor: 'blue',
fillOpacity: 1
},
draggable: true,
title: "double click to delete [" + pathIdx + "," + i + "]",
position: poly.getPaths().getAt(pathIdx).getAt(i)
});
poly.markers[pathIdx][i] = mark;
mark.bindTo('position', poly["binder" + pathIdx], (i).toString());
G.event.addListener(mark, "dblclick", deleteMark);
}
}
function MVCArrayBinder(mvcArray) {
this.array_ = mvcArray;
}
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key) {
if (!isNaN(parseInt(key))) {
return this.array_.getAt(parseInt(key));
} else {
this.array_.get(key);
}
}
MVCArrayBinder.prototype.set = function(key, val) {
if (!isNaN(parseInt(key))) {
this.array_.setAt(parseInt(key), val);
} else {
this.array_.set(key, val);
}
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing,geometry"></script>
<div id="info"></div>
<div id="map_canvas" style="width:100%; height:100%"></div>
所以很多很多很多的感謝geocodezip!本週我沒有時間查看您的解決方案。像往常一樣:非常感謝! –