分组多边形

时间:2014-04-15 03:07:05

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

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

这是我的代码:

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 个答案:

答案 0 :(得分:2)

因此,您需要做的是创建复杂多边形。 A&#34;简单&#34;多边形基本上是您正常的多边封闭形状。 A&#34;复杂&#34;多边形被谷歌地图解释为一个单一的&#39;形状,表示为简单多边形的数组。

我正在开发类似的东西,我允许用户绘制多个区域,但它们属于一个简单的实体。我知道这已经很晚了,但为了实现这一点,当您为每个多边形创建多边形时,您可以使用Polygon.setPaths()函数来设置每个数组作为一个简单的闭合多边形,以便Polygon形状由多组简单路径组成。

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

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