Google maps api:map不能始终如一地执行fitBounds

时间:2014-11-12 15:57:40

标签: javascript google-maps-api-3

有问题的代码:

function setAllMap(map) {
    console.debug(3);
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
    resetZoomOnMapEvents(markers);
}
function resetZoomOnMapEvents(nuLoc) {
        console.debug(1);
        var marks = typeof nuLoc == 'undefined' ? nuLoc : markers;
        var bounds = new google.maps.LatLngBounds();
        for (var i in marks) {
            bounds.extend(marks[i].position);
        }
        map.setCenter(bounds.getCenter());
        map.fitBounds(bounds);
}

地图在返回搜索结果时正常工作。它有时会以地图标记的中心为中心,但有时会以西班牙/非洲为中心。直接问题:为什么行为不一致?

2 个答案:

答案 0 :(得分:0)

也许通过分享我的脚本会有助于触发某些内容? 我有一个循环,对于每个位置,我调用一个名为&#34; renderMarker&#34;的方法。该方法组装标记。

然后我打电话给&#34; centerMap&#34;方法

var GoogleMaps = {
'map': {},
    'marker': {},
    'markerArray': [],
    'markerlatlngArray': [],

    /**
     * Renders marker(s) to the map.
     * Creates infowindow for the given marker.
     * 
     * @param {object} myobj| data for the given marker.
     * @returns {void}
     * 
     */
    renderMarker: function (myobj) {
        var markerlatlng = new google.maps.LatLng(myobj.lat, myobj.lng);

        GoogleMaps.marker = new google.maps.Marker({
            'position': markerlatlng,
            'map': GoogleMaps.map,
            'title': my_title,
            'icon': 'my-icon.png',
            'animation': google.maps.Animation.DROP,
            'data': '<div class="myobjinfowindow">'
                     '<p>Whatever you want goes here.</p>'
                    + '</div>'
        });

        GoogleMaps.marker.set('propertyA', myobj.propertyA);
        GoogleMaps.marker.set('propertyB', myobj.propertyB);
        GoogleMaps.marker.set('propertyC', myobj.propertyC);

        GoogleMaps.markerlatlngArray.push(markerlatlng);
        GoogleMaps.markerArray.push(GoogleMaps.marker);

        GoogleMaps.centerMap();

        GoogleMaps.infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(GoogleMaps.marker, 'click', function () {
            GoogleMaps.infowindow.close();
            GoogleMaps.infowindow.setContent(this.data);
            GoogleMaps.infowindow.open(GoogleMaps.map, this);
        });
    }

/**
 * Centers the map around the given markers.
 * 
 * @returns {void}
 * 
 */
centerMap: function () {
        var latlngbounds = new google.maps.LatLngBounds();

        $.each(GoogleMaps.markerlatlngArray, function (i, marker) {
            latlngbounds.extend(marker);
        });

        GoogleMaps.map.setCenter(latlngbounds.getCenter());
        GoogleMaps.map.fitBounds(latlngbounds);
    }
}

答案 1 :(得分:0)

正如所给出的,这个问题非常直接地问:&#34;为什么有时地图会在西班牙和阿里卡之间的某个区域重新定位?&#34;

首先,合理的分析建议确保提供的代码确实有效。

经过大量测试和跟踪后,代码确实有效。这方面的部分困难在于这是一个继承的项目,并且在多个位置调用所使用的方法。由于只是加载页面启动了一个触发这些相同方法的搜索,并且没有继承的方法来确定是否在页面加载或用户交互上调用该方法,因此增加了难度。其中存在明显的不一致性:为什么它会在手动搜索时100%正确加载,而不是在初始页面加载搜索时100%正确加载?

为了确保这是一个合理的问题,需要完成使用google maps api对所有模块和页面进行大量测试并注意观察结果。实际上,具有此功能的所有页面在手动搜索和所有页面上都能正常工作,但其中一个页面在初始页面加载搜索时正常工作。

这引出了下一个逻辑问题:一个页面上发生了什么事情导致行为不一致?

在追求答案时,跟踪了javascript,分析了网络响应。网络时间不负责任(必要的分析,以防在呼叫完成时数据不存在,从而可能改变结果)。剩下的结论是,出于某种原因,有时某些东西会在原始问题中提到的呼叫之前或之后重新定位地图。

经过更多分析后,发现了一种方法,将地图中心重置为35,0纬度/长。顺便提一下,这是西班牙和非洲之间的位置。删除强制重定位的代码解决了这个问题。

总而言之,原始问题中提交的代码本身没有任何错误。深陷&#34;隐藏&#34;的问题javascript方法,不容易看到,没有记录。