【问题标题】:Grouping polygons对多边形进行分组
【发布时间】:2014-05-29 05:35:11
【问题描述】:

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

这是我的代码:

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

【问题讨论】:

  • 没人有解决办法吗? :(
  • 这些多边形会重叠吗?
  • 我认为没有,因为只有 1 个坐标位于具有相同组的任何多边形中。

标签: javascript google-maps-api-3 polygons


【解决方案1】:

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

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

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

为迟到和抽象的答案道歉。

【讨论】:

  • 感谢您的回复,到目前为止我已经实施了您的建议(因为没有人提出任何解决方案),我认为这是合乎逻辑的解决方案,我希望在下一次谷歌 API 更新时有这样的功能。问候 n.b:我在这里的 google map api v3 有一些问题,也许你可以帮助我,谢谢stackoverflow.com/questions/23490984/…
  • 确实,很高兴 Moelle 博士接受了这一点并帮助您调试了您的情况。
猜你喜欢
  • 2020-05-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-09-06
  • 2020-04-21
  • 2016-09-27
  • 1970-01-01
  • 2014-07-12
相关资源
最近更新 更多