Google map infowindow position

Question

Описание: sample google map с тремя полигонами. Я устанавливаю InfoWindow для каждого полигона, как,

for (var i in coordinates) { 
      arr = []; 

    for (var j=0; j < coordinates[i].length; j++) { 
       arr.push(new google.maps.LatLng(
        parseFloat(coordinates[i][j][0]), 
        parseFloat(coordinates[i][j][1]) 
      )); 

       bounds.extend(arr[arr.length-1]) 
      } 

    // Construct the polygon. 
    polygons.push(new google.maps.Polygon({ 
       paths: arr, 
       strokeColor: '#FF0000', 
       strokeOpacity: 0.8, 
       strokeWeight: 2, 
       fillColor: '#FF0000', 
       fillOpacity: 0.35 
      })); 
      polygons[polygons.length-1].setMap(map);  

      var infowindow = new google.maps.InfoWindow({ 
    content:"Hello World!" 
    }); 

google.maps.event.addListener(polygons[polygons.length-1], 'click', function(event) { 
    infowindow.open(map); 
    infoWindow.setPosition(event.latLng); 
    });  

} 

Но InfoWindow показывает в верхнем левом положении. Как я могу установить его в центре щелкнутого многоугольника?

Answer 1

два вопрос:

1. Существует опечатка в вашей пунктКодЧтобе слушателя, JavaScript чувствителен к регистру, infowindow и infoWindow различные объекты, так что вы не устанавливая положение InfoWindow правильно.

   infowindow.open(map); 
   infoWindow.setPosition(event.latLng); 
   

2. Вы в настоящее время размещения InfoWindow на месте, щёлкнули infoWindow.setPosition(event.latLng);.

Если вы хотите InfoWindow в центре границ полигона, необходимо поместить его туда:

updated fiddle

фрагмент кода:

var map, infoWindow; 
 
var infoWindow = new google.maps.InfoWindow({ 
 
    content: "Hello World!" 
 
}); 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 5, 
 
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875), 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }; 
 

 
    var bounds = new google.maps.LatLngBounds(); 
 
    var polygons = []; 
 
    var arr = new Array(); 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    for (var i in coordinates) { 
 
    arr = []; 
 
    var polyBounds = new google.maps.LatLngBounds(); 
 
    for (var j = 0; j < coordinates[i].length; j++) { 
 
     arr.push(new google.maps.LatLng(
 
     parseFloat(coordinates[i][j][0]), 
 
     parseFloat(coordinates[i][j][1]))); 
 

 
     bounds.extend(arr[arr.length - 1]); 
 
     polyBounds.extend(arr[arr.length - 1]); 
 
    } 
 
    var IWpoint = polyBounds.getCenter(); 
 
    // Construct the polygon. 
 
    polygons.push(new google.maps.Polygon({ 
 
     paths: arr, 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 2, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.35, 
 
     IWpoint: IWpoint 
 
    })); 
 
    polygons[polygons.length - 1].setMap(map); 
 
    var centerMark = new google.maps.Marker({ 
 
     map: map, 
 
     position: IWpoint, 
 
     icon: { 
 
     url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", 
 
     anchor: new google.maps.Point(3.5, 3.5), 
 
     size: new google.maps.Size(7, 7) 
 
     }, 
 
     title: "polygon " + i 
 
    }); 
 
    google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) { 
 
     infoWindow.setPosition(this.IWpoint); 
 
     infoWindow.open(map); 
 
    }); 
 

 
    } 
 
    map.fitBounds(bounds); 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
// Define the LatLng coordinates for the polygon's path. 
 
var coordinates = { 
 
    "feed1": [ 
 
    [25.774252, -80.190262], 
 
    [18.466465, -66.118292], 
 
    [32.321384, -64.75737], 
 
    [25.774252, -80.190262] 
 
    ], 
 

 
    "feed2": [ 
 
    [26.774252, -81.190262], 
 
    [19.466465, -67.118292], 
 
    [33.321384, -65.75737], 
 
    [26.774252, -81.190262] 
 
    ], 
 

 
    "feed3": [ 
 
    [27.774252, -82.190262], 
 
    [20.466465, -68.118292], 
 
    [34.321384, -66.75737], 
 
    [27.774252, -82.190262] 
 
    ] 
 
};

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

Если вы хотите, чтобы поместить его на полигонах «центроида», вам нужно вычислить, что и поместить его туда: [? Как обновить файл KML/слой динамически]

// from http://stackoverflow.com/questions/9692448/how-can-you-find-the-centroid-of-a-concave-irregular-polygon-in-javascript 
function get_polygon_centroid(pts) { 
    var first = pts[0], last = pts[pts.length-1]; 
    if (first.lat() != last.lat() || first.lng() != last.lng()) pts.push(first); 
    var twicearea=0, 
    x=0, y=0, 
    nPts = pts.length, 
    p1, p2, f; 
    for (var i=0, j=nPts-1 ; i<nPts ; j=i++) { 
     p1 = pts[i]; p2 = pts[j]; 
     f = p1.lat()*p2.lng() - p2.lat()*p1.lng(); 
     twicearea += f;   
     x += (p1.lng() + p2.lng()) * f; 
     y += (p1.lat() + p2.lat()) * f; 
    } 
    f = twicearea * 3; 
    return new google.maps.LatLng(y/f, x/f); 
} 

jsfiddle