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

Markers from nearby search shown on last map only

本文关键字:一张 地图 最后 显示 附近搜索      更新时间:2023-09-26

我正在显示几个地图。首先,我有一个每个地图的代码,这变得相当大,所以我试图减少我的代码。然而,我似乎无法让这最后一件事发挥作用。谷歌附近搜索的结果总是显示在最后一张地图上。有没有一种方法可以在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);

当前您正在覆盖变量mapinfoWindow&循环中的service,在结束时,所有变量都将具有上次迭代中分配的值。

保持变量不变(例如,通过函数使其"私有"),并将这些变量作为参数传递给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);