如何删除具有孔的多边形上的顶点（节点）（Google Maps V3）

问题描述

我已经从拿到了这个例子（解决方案），但我添加了一个带有内孔的多边形。

适用于外层顶点路径，但不适用于内部顶点路径。

我需要为内部和外部节点实现事件监听器，因为在内部顶点上的火灾事件中，删除外部顶点。它不能很好地工作。

有人可以提供一些关于如何解决这个问题的范例吗？

解决方案

你的问题之一是带有多边形的多边形，它有多个（在这种情况下是两个）路径，并且你没有为两个路径上的改变添加监听器。下面是一个概念证明，它不是完美的，有时标记是孤立的，但应该是一个起点。双击顶点下方的蓝色标记以删除它们（我无法让您的X可靠地工作）。

代码片段：

var G = google.maps; var zoom = 8; var centerPoint = new G.LatLng（37.286172，-121.80929）; var map; $（function（）{//创建选项对象var myOptions = {center：centerPoint，zoom：zoom，mapTypeId：G.MapTypeId.ROADMAP}; //创建带选项的地图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），新G.LatLng（37.086172，-122.00929），新G.LatLng（37.086172，-121.60929），新G.LatLng（37.486172，-121.60929），新G.LatLng（37.486172，-122.00929）] ]。 poly = new G.Polygon（{clickable：false，paths：paths，map：map}）; polygonBinder（聚）; poly.setEditable（真）; 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] = [];对于（var j = 0; j html，body，＃map_canvas {height：100 ％;宽度：100％;保证金：0; < script src =https：//

I have taken this example (solution) from Ian Grainger, but I added a Polygon with inner hole.

This example work fine for outer vertex path, but not for inner vertex path.

I need implement event Listener for internal and external node, because on fire event on internal vertex, delete external vertex. It doesn't work well.

Can someone provide some sample on how to solve this issue?

解决方案

One of your issues is polygon with a hole in it has multiple (in this case two) paths, and you aren't adding listeners for changes on both paths. Below is a proof of concept, it isn't perfect, sometimes markers are orphaned, but should be a starting point. Double click on the blue markers underneath the vertices to delete them (I couldn't get your "X" to reliably work).

proof of concept fiddle

updated proof of concept with white markers

code snippet:

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>

这篇关于如何删除具有孔的多边形上的顶点（节点）（Google Maps V3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！