我有一些项目使用多边形,我想制作一些具有不同填充颜色的多边形,但我也希望将它全部放在一个组中,我的意思是当我拖动任何多边形时,另一个在同一组内被拖到一起,我怎么做到这一点?
这是我的代码:
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);
答案 0 :(得分:2)
因此,您需要做的是创建复杂多边形。 A&#34;简单&#34;多边形基本上是您正常的多边封闭形状。 A&#34;复杂&#34;多边形被谷歌地图解释为一个单一的&#39;形状,表示为简单多边形的数组。
我正在开发类似的东西,我允许用户绘制多个区域,但它们属于一个简单的实体。我知道这已经很晚了,但为了实现这一点,当您为每个多边形创建多边形时,您可以使用Polygon.setPaths()
函数来设置每个数组作为一个简单的闭合多边形,以便Polygon
形状由多组简单路径组成。
然后,您可以存储和设置该多边形,以便在拖动/着色其中一个简单多边形时,所有其余的相同形状也会受到影响。
为迟到和抽象的回答道歉。