Question

我正在制作带有多个标记的谷歌地图视图。这些标记是根据每次更改过滤器设置时激活的ajax请求放置的（如仅显示酒店）

我希望每次将新标记添加到标记的边界时更改缩放和居中。但由于某种原因，它不会以正确的方式工作。似乎仍然可以识别移除的标记。

我希望有人可以帮助我:)。

这是javascript代码：

var locations = [];
            $.each( data.result, function( key, item ) {
                locations.push([item.Title,item.Latitude,item.Longitude]);
            });
            console.log(locations);
            google.maps.event.trigger(map, 'resize');

            //clear marks
            for (i = 0; i < markers.length; i++) {
                markers[i].setMap(null);
            }

            //set marks
            for (i = 0; i < locations.length; i++) {  
                markers.push( new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                }));
            }

            //set the center
            var bounds = new google.maps.LatLngBounds();
            console.log(bounds);
            for(i=0;i<markers.length;i++) {
                bounds.extend(markers[i].getPosition());
            }
            map.setCenter(bounds.getCenter());

这是第5行位置数组中的键之一

0: "Nationaal Zwemcentrum de Tongelreep"
1: "51.4113463"
2: "5.4760268"

Answer 1

试试这个

Ajax Call EVevnt

var markers = [];//Top of all to access in whole javascript

$.each( data.result, function( key, item ) {
   markers.push({"title": "Name=" + item.Title + ", "lat": "" + item.Latitude + "", "lng": "" + item.Longitude + "" });
});

然后它将传递到下面的javascript（在ajax进程javascript中定义这个javascript下面的javascript）

function initialize() {       
    var icon = {
        url: '../../Content/Images/redpin.png'
        //url: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png'
    };    

    var mapCentre;    

        //Choose some default options
        var mapOptions = {
            //center: new google.maps.LatLng(22.415158, 73.100825),
            //center: myLatlng,
            center: new window.google.maps.LatLng(22.415158, 73.100825), // default to London
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true
        };       

    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    for (i = 0; i < markers.length; i++) {
        var data = markers[i];
        var imagee = markers[i];          
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);            
        map.setCenter(new google.maps.LatLng(markers[0].lat, markers[0].lng));
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            icon: icon,
            title: markers[i].title
        });

        (function (marker, data) {
            // Attaching a click event to the current marker
            google.maps.event.addListener(marker, 'click', function (e) {
                infoWindow.setContent(data.discription);
                infoWindow.open(map, marker);
                if (marker.getAnimation() != null) {
                    marker.setAnimation(null);
                } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            });
        })(marker, data);
    }
    marker.setAnimation(google.maps.Animation.BOUNCE); 

}

Answer 2

这个与饼干的答案结合起来就是这个伎俩

http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/

在ajax / json请求后，映射中心并放大标记

2 个答案: