javascript - 分组多边形

Question

我有一些使用多边形的项目，我想制作一些具有不同填充颜色的多边形，但我也想将它们全部放在一个组中，我的意思是当我拖动任何多边形时，同一组中的另一个被拖在一起，我如何做到这一点？

这是我的代码:

var marker;
var map;
var elevator;
var listenerHandle;

function initialize()
{
var mapOpt = {
  center:new google.maps.LatLng(-8.664523972355582,115.2165412902832),
  maxZoom:30,
  zoom:14,
  panControl:false,
  zoomControl:false,
  mapTypeControl:true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: google.maps.ControlPosition.BOTTOM_LEFT
    },
  scaleControl:true,
  streetViewControl:false,
  overviewMapControl:false,
  rotateControl:false,    
  mapTypeId:google.maps.MapTypeId.HYBRID
  };
map=new google.maps.Map(document.getElementById("map_pan"),mapOpt);

elevator = new google.maps.ElevationService();

var infoWindow = new google.maps.InfoWindow;
downloadUrl("addons/view/xml.php", function(data) {
    var xml = data.responseXML;
    var paths = xml.documentElement.getElementsByTagName("path");
    for (var i = 0; i < paths.length; i++) {
        var sitename = paths[i].getAttribute("sitename");
        var koordinat = paths[i].getAttribute("koordinat");
        var koor = koordinat.split(";");
        var koorbts = paths[i].getAttribute("koorbts");
        var warna = paths[i].getAttribute("color");
        var latlng = [];
        var polygon ="";
        var html = sitename;
        for (var j = 0; j<koor.length; j++){
            var kordi = koor[j].split(",");
            var lat = kordi[0];
            var lng = kordi[1];
            latlng[j] =  new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
        }
        polygon = new google.maps.Polygon({
            map: map,
            paths: latlng,
            strokeColor: warna,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: warna,
            fillOpacity: 0.8,
            draggable: true,
            geodesic: true
        });
        bindInfoWindow(polygon, koorbts, map, infoWindow, html);
    }
});

}

function bindInfoWindow(polygon, koorbts, map, infoWindow, html) {
  google.maps.event.addListener(polygon, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map);
    var kor = koorbts.split(",");
    var lat = kor[0];
    var lng = kor[1];
    latlng =  new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
    infoWindow.setPosition(latlng);
    document.getElementById('x_lat').value = lat;
    document.getElementById('y_lng').value = lng;

  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

function mapclick(){
    google.maps.event.removeListener(listenerHandle);
    listenerHandle = google.maps.event.addListener(map,'click',function(event){
        if (!marker) {
        marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable:true
        });

    }
    else { marker.setPosition(event.latLng); }
        updateMarkerPosition(marker.getPosition());
        google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerPosition(marker.getPosition());});
      });
}

function updateMarkerPosition(latLng) {
    var floatlat = parseFloat(latLng.lat());
    var floatLng = parseFloat(latLng.lng());
    var latx = floatlat.toFixed(6);
    var lngy = floatLng.toFixed(6);
    $("#x_lat").val(latx);
    $("#y_lng").val(lngy);
}

function deleteOverlays() {
    google.maps.event.removeListener(listenerHandle);
    marker.setMap(null);
    marker="";
}



google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

所以您需要做的是创建一个复杂的多边形。 “简单”多边形基本上是您正常的多边闭合形状。谷歌地图将“复杂”多边形解释为“单一”形状，表示为一组简单的多边形。

我正在做类似的事情，我允许用户画出多个区域，但作为一个简单的实体属于一起。我知道这已经晚了，但要实现这一点，当您创建多边形时，对于每个多边形，您可以使用 Polygon.setPaths() 函数，您应该为每个 Array 作为一个简单的闭合多边形，因此 Polygon 形状由多组简单路径组成。

然后，您可以存储和设置该多边形，这样当您拖动/着色其中一个简单的多边形时，相同形状的所有其他多边形也会受到影响。

为迟到的抽象回答道歉。