Javascript 在ajax/json请求后映射中心和缩放标记

我正在制作一个带有多个标记的谷歌地图视图。 这些标记是基于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());

试试这个

Ajax调用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）

函数初始化（）{
变量图标={
url:“../Content/Images/redpin.png”
//网址：'https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png'
};    
var地图中心；
//选择一些默认选项
变量映射选项={
//中心：新google.maps.LatLng（22.41515873.100825），
//中心：myLatlng，
中心：newwindow.google.maps.LatLng（22.41515873.100825），//默认为伦敦
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP，
scaleControl：对
};       
var infoWindow=new google.maps.infoWindow（）；
var map=new google.maps.map（document.getElementById（'map_canvas'），mapOptions）；
对于（i=0；i

这一个结合了cracker的答案就成功了

---

如果有多个标记，您想做什么？我想缩放并居中，以便所有标记都可见。这段代码只工作一次。在ajax请求后，所有数据都会从地图中消失？不，这是一种过滤器。每次更改过滤器值时，都会调用此ajax请求。然后首先删除所有标记（在//清除标记下），然后添加新标记。Hello已将我的代码替换为您的代码，但地图不居中。编辑：如果只有一个标记可以工作。map.setCenter（新的google.maps.LatLng（标记[0].lat，标记[0].lng））；此设置映射到中心，请仔细检查

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 + "" });
});

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); 

}