附近搜索的标记仅显示在最后一张地图上

Question

我在下面显示了几张地图。首先，我为每张地图编写了一个代码，这变得相当大，所以我试图减少我的代码。但是我似乎无法让这最后一件事发挥作用。 google 的附近搜索结果始终显示在最后一张地图上。有没有一种方法可以在 createmarker 函数中设置地图，以便将标记设置为正确的地图 (map[i])？我曾尝试将所有地图存储在一个 MarkersArray 中，但也无法正常工作。谢谢！

var map;
        var infoWindow;
        var service;
        var request;
        var i;

        function initialize()
        {
            for (i = 2; i < locations.length-2; i++) {
                var MapCenter = new google.maps.LatLng(locations[i][1],locations[i][2]); //CENTRE  MAP: N/S, E(lower)/W
                MyOptions =
                {
                    zoom: 12,
                    center: MapCenter,
                    disableDefaultUI:true,
                    scrollwheel:false
                };
                map = new google.maps.Map(document.getElementById('map'+i), MyOptions);
                var weatherLayer = new google.maps.weather.WeatherLayer({
                temperatureUnits: google.maps.weather.TemperatureUnit.Celsius                   });
                weatherLayer.setMap(map);
                var cloudLayer = new google.maps.weather.CloudLayer();
                cloudLayer.setMap(map);
                infoWindow = new google.maps.InfoWindow();
                service = new google.maps.places.PlacesService(map);
                request = {
                    location: MapCenter,
                    radius: 10000,
                    types: ['airport','shopping_mall','subway_station','train_station','museum','place_of_worship','zoo','city_hall','local_government_office']
                };
                service.nearbySearch(request, callback);
            };
        };

        function callback(results, status) {
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                alert(status);
                return;
            }
            for (var j = 0, result; result = results[j]; j++) {
                createMarker(result);
            }
        };

        function createMarker(place) {
            var gpmarker    = new google.maps.MarkerImage(place.icon, null, null, null, new google.maps.Size(place.rating*5, place.rating*5));
            var marker      = new google.maps.Marker({
                map: map,
                position: place.geometry.location,
                title: place.name,
                icon: gpmarker
            });
            google.maps.event.addListener(marker, 'click', function() {
                service.getDetails(place, function(result, status) {
                    if (status != google.maps.places.PlacesServiceStatus.OK) {
                        alert(status);
                        return;
                    }
                    infoWindow.setContent(result.name);
                    infoWindow.open(map, marker);
                });
            });
        };

        google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

目前您正在覆盖循环内的变量 map、infoWindow 和 service，最后所有变量都将具有上次迭代中分配的值。

保持变量不变（例如通过函数使它们成为 "private"）并将这些变量作为参数传递给 callback() 和 createMarker()

    function initialize() {

        for (i = 2; i < locations.length - 2; i++) {
            (function (i) {
                var MapCenter = new google.maps.LatLng(locations[i][1], locations[i][2]),
                    MyOptions = {
                        zoom: 12,
                        center: MapCenter,
                        disableDefaultUI: true,
                        scrollwheel: false
                      },
                    map = new google.maps.Map(document.getElementById('map' + i), MyOptions),
                    weatherLayer = new google.maps.weather.WeatherLayer({
                        temperatureUnits: google.maps.weather.TemperatureUnit.Celsius,
                        map: map
                      }),
                    cloudLayer = new google.maps.weather.CloudLayer(),
                    infoWindow = new google.maps.InfoWindow(),
                    service = new google.maps.places.PlacesService(map),
                    request = {
                        location: MapCenter,
                        radius: 10000,
                        types: ['airport',
                            'shopping_mall',
                            'subway_station',
                            'train_station',
                            'museum',
                            'place_of_worship',
                            'zoo', 'city_hall',
                            'local_government_office'
                        ]
                    };
                cloudLayer.setMap(map);
                service.nearbySearch(request, function (results, status) {
                    callback(results, status, map, infoWindow, service)
                });
            }(i))

        };
    };

    function callback(results, status, map, infoWindow, service) {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
            alert(status);
            return;
        }
        for (var j = 0, result; result = results[j]; j++) {
            createMarker(result, map, infoWindow, service);
        }
    };

    function createMarker(place, map, infoWindow, service) {
      //your current code may stay as it is 
    };

    google.maps.event.addDomListener(window, 'load', initialize);

附近搜索的标记仅显示在最后一张地图上

Markers from nearby search shown on last map only

javascript

google-maps

google-maps-api-3