Question

我关闭闭包的技巧并不是那么好，我试图保留对每个InfoWindows的引用以供稍后使用，但似乎无法从这个位置继续前进。所有发生的事情是，无论我点击哪个标记，都会打开相同的InfoWindow。不要担心{{}} Django模板代码很好。

        $( document ).ready(function() {

            var map;
            var myLatlng;
            var marker = [];
            var infowindow = [];
            var map_markers = [];

            {% for map_marker in map_markers %}
            map_markers.push({
                'lat':{{map_marker.latitude}},
                'lng':{{map_marker.longitude}},
                'icon':{% if map_marker.icon %}'{{map_marker.icon.url}}'{% else %}''{% endif %},
                'info':{% if map_marker.info %}'{{map_marker.info.strip|safe|escapejs}}'{% else %}''{% endif %},
            });
            {% endfor %}

            var mapOptions = {
                zoom: {{map_settings.zoom}},
                center: new google.maps.LatLng({{map_settings.latitude}}, {{map_settings.longitude}})
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            for (i in map_markers){

                myLatlng = new google.maps.LatLng( map_markers[i].lat , map_markers[i].lng );

                marker[i] = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Marker',
                    icon: map_markers[i].icon
                });

                if ( map_markers[i].info ){

                    infowindow[i] = new google.maps.InfoWindow({
                        content: map_markers[i].info
                    });

                    google.maps.event.addListener(marker[i], 'click', function() {
                        infowindow[i].open(map,marker[i]);
                    });

                }
            }

        });

因为我已经围绕这个问题继续前进，这将是很好的。任何帮助表示赞赏。

Answer 1

修正了......添加了以下功能

            function marker_click(marker,infowindow){
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
            }

然后叫它......

marker_click(marker[i], infowindow[i]);

Answer 2

一种选择是使用标记的成员变量而不是函数闭包。将（自定义）成员添加到标记（例如iWcontent）：

marker[i] = new google.maps.Marker({
   position: myLatlng,
   map: map,
   title: 'Marker',
   icon: map_markers[i].icon,
   iWcontent:  map_markers[i].info
});

在标记点击功能中使用它：

google.maps.event.addListener(marker[i], 'click', function() {
   infowindow.setContent(this.iWcontent);
   infowindow.open(map,this);
});

proof of concept fiddle

代码段：

＆＃13;

var geocoder;
var map;
var map_markers = [];
var marker = [];
var infowindow = new google.maps.InfoWindow();

            map_markers.push({
                'lat':45,
                'lng':-75,
                'icon':null,
                'info':'{{0}}'
            });
            map_markers.push({
                'lat':45.5,
                'lng':-75.5,
                'icon':null,
                'info':'html, body, #map-canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}'
            });

function initialize() {
            var mapOptions = {
                zoom: 5,
                center: new google.maps.LatLng(45, -75)
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            for (i in map_markers){

                myLatlng = new google.maps.LatLng( map_markers[i].lat , map_markers[i].lng );

                marker[i] = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'Marker',
                    icon: map_markers[i].icon,
                    iWcontent:  map_markers[i].info
                });

                if ( map_markers[i].info ){

                    google.maps.event.addListener(marker[i], 'click', function() {
                        infowindow.setContent(this.iWcontent);
                        infowindow.open(map,this);
                    });

                }
            }
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

＆＃13;

$scope.checkout = function (cartObj) {
  var modalInstance = $modal.open({
  templateUrl : 'assets/menu/directives/payment-processing-modal.tmpl.html',
  controller : ["$scope", "$modalInstance", "cartObj", function($scope, $modalInstance, cartObj) {
  }],
  resolve : { // This fires up before controller loads and templates rendered
    cartObj : function() {
       return cartObj;
    }
  }
});

＆＃13;

具有单个InfoWindows的多个地图标记

2 个答案: