单击 google 地图 API 中的多边形时如何从 mapLabel 获取文本

Question

实际上，我使用 google 地图 API v3 在多边形内按标签显示文本。单击多边形时，我需要标签中的确切文本。例如我在地图上画了一个多边形。然后我通过以下方式在多边形内创建一个带有文本 "xxx" 的地图标签：

     <html>
     <head>
     <title>Polygon</title>
     <style>
        html, body {
        height: 100%;
        margin: 0;
        padding: 0;
       }
       #map {
         height: 100%;
       }
</style>
<!-- <script src="https://maps.googleapis.com/maps/api/js"></script> -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=true"> </script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js"></script>
<script>
   google.maps.event.addDomListener(window, 'load', initMap);
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {lat: 43.9068675754159, lng: -79.2694987723502},
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var boundaries = '43.8699544680001 -79.302933615 43.8690868410001 -79.3025659099999 43.868577498 -79.302126417 43.8690092800001 -79.301169747 43.869373368 -79.3005397269999 43.8694865470001 -79.300471456 43.8696206320001 -79.300460468 43.869984603 -79.300423856 43.8701492540001 -79.3004412609999 43.871006708 -79.3008239059999 43.8704898330001 -79.3031576939999';
      var latLngArray = boundaries.split(' ');
         var points = [];
        var k = 0;
       var lan = 0, lat = 0;
       for (var i = 0; i < latLngArray.length; i++) 
       {
         pos = latLngArray[i];
         if(k == 0){
           lat = 0;
           lan = 0;
           lat = pos;
           k = 1;
          }else if(k==1){
            lan = pos;
            k = 0;
            points.push(new google.maps.LatLng(parseFloat(lat), parseFloat(lan)));   
        }
    }


    var bermudaTriangle = new google.maps.Polygon({
      paths: points,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 3,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
    });
    bermudaTriangle.setMap(map);

    var bounds = new google.maps.LatLngBounds();
      for (var i=0; i< points.length; i++) {
          bounds.extend(points[i]);
        }
    var myLatlng = bounds.getCenter();

    label: new MapLabel({
          text: 'xxx',
          position: myLatlng,
          fontSize: 10,
          fontColor: 'red',
          labelInBackground: true,
          map: map   // The map object to place the label on
    })
    </script>
    </head>
   <body>
    <div id="map"></div>
   </body>
 </html>

如何在 google 地图中单击多边形时获取文本 (xxx)？

Answer 1

一个选项是将标签添加为多边形的属性，单击多边形时获取它的文本内容。

proof of concept fiddle

代码片段：

google.maps.event.addDomListener(window, 'load', initMap);
var infowindow = new google.maps.InfoWindow();

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {
      lat: 43.9068675754159,
      lng: -79.2694987723502
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var boundaries = '43.8699544680001 -79.302933615 43.8690868410001 -79.3025659099999 43.868577498 -79.302126417 43.8690092800001 -79.301169747 43.869373368 -79.3005397269999 43.8694865470001 -79.300471456 43.8696206320001 -79.300460468 43.869984603 -79.300423856 43.8701492540001 -79.3004412609999 43.871006708 -79.3008239059999 43.8704898330001 -79.3031576939999';
  var latLngArray = boundaries.split(' ');
  var bounds = new google.maps.LatLngBounds();
  var points = [];
  var k = 0;
  var lan = 0,
    lat = 0;
  for (var i = 0; i < latLngArray.length; i++) {
    pos = latLngArray[i];
    if (k == 0) {
      lat = 0;
      lan = 0;
      lat = pos;
      k = 1;
    } else if (k == 1) {
      lan = pos;
      k = 0;
      var pt = new google.maps.LatLng(parseFloat(lat), parseFloat(lan))
      points.push(pt);
      bounds.extend(pt);

    }
  }
  map.fitBounds(bounds);

  var bermudaTriangle = new google.maps.Polygon({
    paths: points,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
  });
  bermudaTriangle.setMap(map);

  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < points.length; i++) {
    bounds.extend(points[i]);
  }
  var myLatlng = bounds.getCenter();

  var label = new MapLabel({
    text: 'xxx',
    position: myLatlng,
    fontSize: 10,
    fontColor: 'red',
    labelInBackground: true,
    map: map // The map object to place the label on
  });
  bermudaTriangle.label = label;
  google.maps.event.addListener(bermudaTriangle, 'click', function(evt) {
    infowindow.setContent(label.text);
    infowindow.setPosition(evt.latLng);
    infowindow.open(map);
  });
}

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/src/StyledMarker.js"></script>
<div id="map"></div>

单击 google 地图 API 中的多边形时如何从 mapLabel 获取文本

How to get the text from mapLabel when I click on the polygon in google map API

javascript

google-maps

polygons

google-maps-api-3

google-maps-markers