javascript - 分组多边形

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

这是我的代码:

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);

最佳答案

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

我正在研究类似的东西，我允许用户绘制多个区域，但作为一个简单的实体属于一起。我知道这已经晚了，但要实现这一点，当您创建多边形时，对于每个多边形，您可以使用 Polygon.setPaths() 函数，您应该将每个数组设置为一个简单的闭合多边形，以便 Polygon 形状是由多组简单路径组成。

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

为迟到的抽象答案道歉。

关于javascript - 分组多边形，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23073981/