为每个多边形打开 InfoWindow 谷歌地图 V3

Question

希望有人可以帮助我解决这个问题。 我正在尝试为我的用户创建的每个多边形打开一个信息窗口。 我对标记使用了相同的代码并且效果很好，但我无法使其适用于每个多边形。

关于如何解决这个问题的任何想法？

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2>Test</h2>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

// 显示区域

<?php foreach ($field->result() as $f):?>

// Create an array with the coordanates of each area

var field<?=$f->id?>Coords = [
    <?php $latlng=$this->resources_data->field_latlng($f->id);?>
    <?php foreach ($latlng->result() as $point):?>
    new google.maps.LatLng(<?=$point->lat?>, <?=$point->lng?>),
    <?php endforeach;?>
];

// Create a polygon with the points of the area

var area<?=$f->id?>=new google.maps.Polygon({
    paths: area<?=$f->id?>Coords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});

// Add the area to the map.

area<?=$f->id?>.setMap(map);

google.maps.event.addListener(area<?=$f->id?>,'click',function(){
    infowindow.open(map,area<?=$f->id?>)
});

<?php endforeach;?>

Answer 1

您不能对多边形使用与标记相同的InfoWindow.open 形式（没有要传入的标记）。

来自the documentation

打开（地图？：地图|StreetViewPanorama，锚点？：MVCObject）

返回值：无

在给定地图上打开此信息窗口。可选地，信息窗口可以与锚点相关联。 在核心 API 中，唯一的锚点是 Marker 类。但是，锚点可以是任何 MVCObject，它公开了 LatLng 位置属性和可选的用于计算 pixelOffset 的 Point anchorPoint 属性（请参阅 InfoWindowOptions）。 anchorPoint 是从锚点位置到信息窗口尖端的偏移量。）

在调用open方法（点击的latlng通常是一个不错的选择）时，你需要专门设置你希望它打开的位置，InfoWindow.setPosition()。

Example

代码 sn-p：

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});


function initialize() {
  var geolib = google.maps.geometry.spherical;
  var myOptions = {
    zoom: 20,
    center: new google.maps.LatLng(32.738158, -117.14874),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  bounds = new google.maps.LatLngBounds();

  var polygon1 = new google.maps.Polygon({
    map: map,
    path: [geolib.computeOffset(new google.maps.LatLng(32.737355, -117.148719), 100, 0),
      geolib.computeOffset(new google.maps.LatLng(32.737355, -117.148719), 100, 120),
      geolib.computeOffset(new google.maps.LatLng(32.737355, -117.148719), 100, -120)
    ],
    name: "polygon1"
  });
  google.maps.event.addListener(polygon1, 'click', function(event) {
    var contentString = "name:" + this.name + "<br>" + event.latLng.toUrlValue(6);
    infowindow.setContent(contentString);
    infowindow.setPosition(event.latLng);
    infowindow.open(map);
  });
  for (var i = 0; i < polygon1.getPath().getLength(); i++) {
    bounds.extend(polygon1.getPath().getAt(i));
  }
  var polygon2 = new google.maps.Polygon({
    map: map,
    path: [geolib.computeOffset(new google.maps.LatLng(32.739341, -117.148912), 90, 180),
      geolib.computeOffset(new google.maps.LatLng(32.739341, -117.148912), 90, 60),
      geolib.computeOffset(new google.maps.LatLng(32.739341, -117.148912), 90, -60)
    ],
    name: "polygon2"
  });
  google.maps.event.addListener(polygon2, 'click', function(event) {
    var contentString = "name:" + this.name + "<br>" + event.latLng.toUrlValue(6);
    infowindow.setContent(contentString);
    infowindow.setPosition(event.latLng);
    infowindow.open(map);
  });
  for (var i = 0; i < polygon2.getPath().getLength(); i++) {
    bounds.extend(polygon2.getPath().getAt(i));
  }

  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);

function createClickablePoly(poly, html, label, point) {
  gpolys.push(poly);
  if (!point && poly.getPath && poly.getPath().getLength && (poly.getPath().getLength > 0) && poly.getPath().getAt(0)) {
    point = poly.getPath().getAt(0);
  }
  var poly_num = gpolys.length - 1;
  if (!html) {
    html = "";
  } else {
    html += "<br>";
  }
  var length = poly.Distance();
  if (length > 1000) {
    html += "length=" + poly.Distance().toFixed(3) / 1000 + " km";
  } else {
    html += "length=" + poly.Distance().toFixed(3) + " meters";
  }
  for (var i = 0; i < poly.getPath().getLength(); i++) {
    html += "<br>poly[" + poly_num + "][" + i + "]=" + poly.getPath().getAt(i);
  }
  html += "<br>Area: " + poly.Area() + " sq meters";
  // html += poly.getLength().toFixed(2)+" m; "+(poly.getLength()*3.2808399).toFixed(2)+" ft; ";
  // html += (poly.getLength()*0.000621371192).toFixed(2)+" miles";
  var contentString = html;
  google.maps.event.addListener(poly, 'click', function(event) {
    infowindow.setContent(contentString);
    if (event) {
      point = event.latLng;
    }
    infowindow.setPosition(point);
    infowindow.open(map);
    // map.openInfoWindowHtml(point,html); 
  });
  if (!label) {
    label = "polyline #" + poly_num;
  }
  label = "<a href='javascript:google.maps.event.trigger(gpolys[" + poly_num + "],\"click\");'>" + label + "</a>";
  // add a line to the sidebar html
  //  side_bar_html += '<input type="checkbox" id="poly'+poly_num+'" checked="checked" onclick="togglePoly('+poly_num+');">' + label + '<br />';
}

body,
html {
  height: 100%;
  width: 100%;
}

<script src="https://maps.google.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<table border="1" style="height:100%; width:100%">
  <tr>
    <td>
      <div id="map_canvas" style="width:100%; height:100%"></div>
    </td>
    <td width="200">
      <div id="report"></div>
    </td>
  </tr>
</table>

Answer 2

<script>

function initMap() {
         var map = new google.maps.Map(document.getElementById('map'), {
             zoom: 12,
             center: {lat: 45.15492713361847, lng: 15.40557861328125}
         });

         var polygons = [{name: 'first name', coordinates:[{lat:45.15492713361847,lng:15.40557861328125},{lat:45.07933920973809,lng:15.5291748046875},{lat:45.01918507438175,lng:15.43304443359375},{lat:45.07933920973809,lng:15.3204345703125}]}];

            // foreach your polygons
            for (var i = 0; i < polygons.length; i++) {
                var item = polygons[i];

                var coors = item["coordinates"];
                var name = item["name"];


                var Polygon = new google.maps.Polygon({
                    path: coors,
                    strokeColor: '#66b3ff',
                    strokeOpacity: 0.8,
                    strokeWeight: 5,
                    editable: false,
                    fillColor: 'blue',
                    fillOpacity: 0.5,
                });
                Polygon.setMap(map);

                // call function to set window
                attachPolygonInfoWindow(Polygon, coors, name);
            }
        }

        function attachPolygonInfoWindow(polygon, coors, html)
        {

            polygon.infoWindow = new google.maps.InfoWindow({
                content: html
            });

            polygon.infoWindow.setPosition(getHighestWindowPosition(coors));

            google.maps.event.addListener(polygon, 'mouseover', function () {
                polygon.infoWindow.open(map, polygon);
            });
            google.maps.event.addListener(polygon, 'mouseout', function () {
                polygon.infoWindow.close();
            });
        }

        // function to get highest position of polygon to show window nice on top 
        function getHighestWindowPosition(coors) {

            var lat = -5000, lng = 0, i = 0, n = coors.length;

            for (; i !== n; ++i) {
                if (coors[i].lat > lat) {
                    lat = coors[i].lat;
                    lng = coors[i].lng;
                }
            }
            return  {lat: lat, lng: lng};

        }

</script>