[英]Adding google.maps.event.addListener in a loop with named function
I appreciate there is a common issue with scoping in loops within javascript, but I can't work out this particular issue. 我感谢javascript中的范围内定义范围存在一个常见问题,但我无法解决这个特定问题。 I have a loop of click listeners to add to my map, I want to call a function to do it:
我有一个单击监听器循环添加到我的地图,我想调用一个函数来做到这一点:
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);
});
However the click listener doesn't seem to get created. 但是,点击监听器似乎没有被创建。 If I do it in an anonymous function it works as expected:
如果我在匿名函数中执行此操作,则会按预期工作:
$.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);
});
The complete problem is described in this JSFiddle with the preferred solution commented out (as it is it works as I'd like). 在此JSFiddle中描述了完整的问题,并注释掉了首选的解决方案(因为它可以按我的意愿工作)。 Can you help me to rewrite this part of the code in an accepted manner.
您能帮我以可接受的方式重写这部分代码吗?
javascript is case sensitive (infoWindow and infowindow are different) 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); });
code snippet: 代码段:
/* * 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.