Именование полигонов на картах Google

Я могу построить 3 области многоугольника на картах Google, используя приведенный ниже код,

    var var_2 = [
    << latitude, longitudes>>.....            

    ];
    var boundary2 = new google.maps.Polygon({
        paths: var_2,
        geodesic: true,
        strokeColor: 'blue',
        strokeOpacity: 0.2,
        strokeWeight: 2,
        fillColor: 'blue',
        fillOpacity: 0.2
    });
    boundary2.setMap(map);
    boundary2.addListener('click', showArrays);
    infoWindow = new google.maps.InfoWindow;

    function showArrays(event) {
        var vertices = this.getPath();
        var contentString = 'AREA_1';
        infoWindow.setContent(contentString);
        infoWindow.setPosition(event.latLng);
        infoWindow.open(map);
    }

Но все 3 полигона имеют одно и то же имя «AREA_3». Пожалуйста, помогите мне исправить это.

-Спасибо


google-maps google-maps-markers polygons
person Amol-K    schedule 08.04.2016    source источник
comment
возможный дубликат несколько полигонов, InfoWindow, setMap   -  person geocodezip    schedule 08.04.2016

Ответы (1)


arrow_upward
5
arrow_downward

Самое простое решение: добавьте «контент» в качестве пользовательского свойства полигона, после чего вы сможете получить к нему доступ в прослушивателе кликов как this.content (при условии, что content является пользовательским свойством:

function showArrays(event) {
    var vertices = this.getPath();
    infoWindow.setContent(this.content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
}

var boundary3 = new google.maps.Polygon({
    paths: var_3,
    geodesic: true,
    strokeColor: 'blue',
    strokeOpacity: 0.2,
    strokeWeight: 2,
    fillColor: 'blue',
    fillOpacity: 0.2,
    content: "AREA_3"
});
boundary3.setMap(map);
boundary3.addListener('click', showArrays);

доказательство концепции скрипки

скриншот карты

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

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(45.6, -40.4),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var var_1 = [
    new google.maps.LatLng(45.6, -40.4),
    new google.maps.LatLng(40.0, -40.4),
    new google.maps.LatLng(45.6, -35.0)
  ]
  var boundary1 = new google.maps.Polygon({
    paths: var_1,
    geodesic: true,
    strokeColor: 'blue',
    strokeOpacity: 0.2,
    strokeWeight: 2,
    fillColor: 'blue',
    fillOpacity: 0.2,
    content: "AREA_1"
  });
  boundary1.setMap(map);
  boundary1.addListener('click', showArrays);

  var var_2 = [
    new google.maps.LatLng(59.677361, -2.469846),
    new google.maps.LatLng(59.299717, -6.314917),
    new google.maps.LatLng(57.877247, -9.314917),
    new google.maps.LatLng(54.428078, -11.638861),
    new google.maps.LatLng(51.784554, -11.702241),
    new google.maps.LatLng(50.185848, -10.054354),
    new google.maps.LatLng(49.405380, -7.012100),
    new google.maps.LatLng(49.090675, -3.272664),
    new google.maps.LatLng(48.775970, -1.709283),
    new google.maps.LatLng(49.757851, -2.089565),
    new google.maps.LatLng(50.714554, 1.037195),
    new google.maps.LatLng(51.482437, 2.304801),
    new google.maps.LatLng(53.433609, 3.276632),
    new google.maps.LatLng(55.863132, 3.445646)

  ];
  var boundary2 = new google.maps.Polygon({
    paths: var_2,
    geodesic: true,
    strokeColor: 'blue',
    strokeOpacity: 0.2,
    strokeWeight: 2,
    fillColor: 'blue',
    fillOpacity: 0.2,
    content: "AREA_2"
  });
  boundary2.setMap(map);
  boundary2.addListener('click', showArrays);
  var var_3 = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.757370),
    new google.maps.LatLng(25.774252, -80.190262)
  ];
  var boundary3 = new google.maps.Polygon({
    paths: var_3,
    geodesic: true,
    strokeColor: 'blue',
    strokeOpacity: 0.2,
    strokeWeight: 2,
    fillColor: 'blue',
    fillOpacity: 0.2,
    content: "AREA_3"
  });
  boundary3.setMap(map);
  boundary3.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;

  function showArrays(event) {
    var vertices = this.getPath();
    infoWindow.setContent(this.content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  }
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

person geocodezip    schedule 08.04.2016