Question

我很欣赏javascript中循环中存在一个常见问题，但我无法解决这个问题。我有一个点击侦听器循环添加到我的地图，我想调用一个函数来执行它：

function addInfoListener(name,map){
        var infowindow = new google.maps.InfoWindow({
            content: "<p>"+name+"</p>",
        });
        google.maps.event.addListener(map, 'click', function(e) {
            infoWindow.setPosition(e.latLng);
            infowindow.open(map);
        });                     
    }

$.each(polygons, function(index, value){
            addInfoListener(controller.getCragName(index),map);
});

然而，点击监听器似乎没有被创建。如果我在匿名函数中执行它，它会按预期工作：

$.each(polygons, function(index, value){
        google.maps.event.addListener(value, 'click', function(e){infoWindow.setContent("<p>"+controller.getCragName(index)+"</p>");                                                                     
                                                                 infoWindow.setPosition(e.latLng);});
        infoWindow.open(this.map);                                                                          
    });

这个JSFiddle中描述了完整的问题，其中首选的解决方案已被注释掉（因为它可以像我一样工作）。你能帮助我以一种公认的方式重写这部分代码。

http://jsfiddle.net/eatxt3od/

Answer 1

您需要聆听多边形的点击，而不是在地图上

javascript区分大小写（infoWindow和infowindow不同）

function addInfoListener(polygon, name, map) {
    var infowindow = new google.maps.InfoWindow({
        content: "<p>" + name + "</p>"
    });
    google.maps.event.addListener(polygon, 'click', function (e) {
        infowindow.setPosition(e.latLng);
        infowindow.open(map);
    });
    console.dir(map);
}

$.each(polygons, function (index, value) {
    addInfoListener(value, controller.getCragName(index), map);
});

working fiddle

代码段：

/*
 * declare map as a global variable
 */
var map;

/* ======= Model ======= */

var model = {

  crags: [{
    name: "Stanage",
    cragColor: "'#FF0000'",
    coords: [new google.maps.LatLng(53.360470, -1.646050),
      new google.maps.LatLng(53.359523, -1.647895),
      new google.maps.LatLng(53.351006, -1.637123),
      new google.maps.LatLng(53.351364, -1.627167)
    ]
  }, {
    name: "Burbage",
    cragColor: "'#00AA00'",
    coords: [new google.maps.LatLng(53.341489, -1.606224),
      new google.maps.LatLng(53.338148, -1.605190),
      new google.maps.LatLng(53.338145, -1.600849),
      new google.maps.LatLng(53.341501, -1.604020)
    ]
  }, {
    name: "Higgar",
    cragColor: "'#0000BB'",
    coords: [new google.maps.LatLng(53.340912, -1.611288),
      new google.maps.LatLng(53.338048, -1.612833),
      new google.maps.LatLng(53.339762, -1.608670)
    ]
  }]
};

/* ======= Controller ======= */

var controller = {

  init: function() {

    mapView.init();
  },

  getStanageCoords: function() {
    return model.stanageCoords;
  },

  getBurbageCoords: function() {
    return model.burbageCoords;
  },

  getCrags: function() {
    return model.crags;
  },

  getCragName: function(index) {
    return model.crags[index].name;
  }
};

/* ======= View ======= */
var mapView = {
  polygons: [],

  init: function() {
    this.drawMap();
    this.render();
  },

  render: function() {
    console.log("Rendering map view");
  },

  drawMap: function() {
    var polygons = new Array();
    var infoWindow = new google.maps.InfoWindow();

    var map = new google.maps.Map(document.getElementById("map_view"), {
      center: new google.maps.LatLng(53.3472915, -1.633261),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    $.each(controller.getCrags(), function(index, value) {
      var polygon = new google.maps.Polygon({
        paths: value.coords,
        strokeColor: value.cragColor,
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: value.cragColor,
        fillOpacity: 0.35
      });
      polygons.push(polygon);
      polygon.setMap(map);

    });

    function addInfoListener(polygon, name, map) {
      var infowindow = new google.maps.InfoWindow({
        content: "<p>" + name + "</p>"
      });
      google.maps.event.addListener(polygon, 'click', function(e) {
        infowindow.setPosition(e.latLng);
        infowindow.open(map);
      });
      console.dir(map);
    }

    $.each(polygons, function(index, value) {
      addInfoListener(value, controller.getCragName(index), map);
    });
  }
};
google.maps.event.addDomListener(window, "load", function() {
  controller.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_view" style="height: 800px; width: 800px;"></div>

在具有命名函数的循环中添加google.maps.event.addListener

1 个答案: