Javascript 谷歌地图api：地图不一致执行

有关守则：

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

函数setAllMap（map）{
控制台调试（3）；
对于（var i=0；i

---

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

也许通过共享我的脚本，它将有助于触发某些事件？ 我有一个循环，对于每个位置，我调用一个叫做“renderMarker”的方法。这种方法可以组合标记

然后我调用“centerMap”方法

var谷歌地图={
'map'：{}，
'标记'：{}，
“markerArray”：[]，
“MarkerLattngarray”：[]，
/**
*将标记渲染到地图。
*为给定标记创建信息窗口。
* 
*@param{object}myobj|给定标记的数据。
*@returns{void}
* 
*/
渲染标记器：函数（myobj）{
var markerlatng=new google.maps.LatLng（myobj.lat，myobj.lng）；
GoogleMaps.marker=新建google.maps.marker({
“位置”：markerlatlng，
“地图”：GoogleMaps.map，
“头衔”：我的头衔，
'icon'：'my icon.png'，
“动画”：google.maps.animation.DROP，
“数据”：”
“你想要什么都行。
”
+ ''
});
GoogleMaps.marker.set（'propertyA'，myobj.propertyA）；
GoogleMaps.marker.set（'propertyB'，myobj.propertyB）；
GoogleMaps.marker.set（'propertyC'，myobj.propertyC）；
GoogleMaps.markerlatngarray.push（markerlatng）；
GoogleMaps.markerary.push（GoogleMaps.marker）；
GoogleMaps.centerMap（）；
GoogleMaps.infowindow=新的google.maps.infowindow（）；
google.maps.event.addListener（GoogleMaps.marker，'click'，函数（）{
GoogleMaps.infowindow.close（）；
GoogleMaps.infowindow.setContent（this.data）；
打开（GoogleMaps.map，this）；
});
}
/**
*围绕给定标记使地图居中。
* 
*@returns{void}
* 
*/
centerMap:函数（）{
var latlngbounds=new google.maps.latlngbounds（）；
$.each（GoogleMaps.markerlatngarray，函数（i，标记）{
横向边界延伸（标记）；
});
GoogleMaps.map.setCenter（latlngbounds.getCenter（））；
GoogleMaps.map.fitBounds（latlngbounds）；
}
}

如前所述，这个问题非常直接地问：“为什么有时地图会重新居中于西班牙和阿里卡之间？”

首先，合理的分析将建议确保提供的代码实际工作

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

为了确保这是一个合理的问题，需要使用google maps api对所有模块和页面进行广泛测试，并记录观察结果。实际上，所有具有此功能的页面在手动搜索时都能正常工作，只有一个页面在初始页面加载搜索时工作正常

这就引出了下一个逻辑问题：这一页上是否发生了导致不一致行为的事情

在寻找答案的过程中，跟踪javascript，分析网络响应。网络时间不负责任（如果在通话结束时数据不存在，则进行必要的分析，从而可能改变结果）。剩下的结论是，出于某种原因，有时在原始问题中提到的呼叫之前或之后，地图会重新居中

经过进一步分析，发现了一种将地图中心重置为35,0 lat/long的方法。顺便说一句，这里位于西班牙和非洲之间。删除强制重新居中的代码解决了该问题

---

总而言之，原始问题中提交的代码本身没有任何错误。深度“隐藏”javascript方法的问题是不容易看到且没有文档记录

为什么要同时执行map.setCenter和map.fitBounds？你应该只做一个，我刚把setCenter带出去了。没有改变一件事…也许你可以提供一个感谢。。。但是嗯。。。我正在查看您的centerMap函数，我们正在做完全相同的事情，只是您在创建的标记上使用jquery函数。。。我的标记位置存储在名为“internalPosition”的索引中。缩放到刚好适合标记的效果非常好。它只是没有将地图集中在边界上。getCenter（）。并不是说它会改变任何东西，而是在调用

setCenter（latlngbounds.getCenter（））

之后再调用

fitBounds

是多余的。如果您在多次调用

renderMarker

的对象中循环，请在最后执行

fitBounds

，这将导致不必要的函数调用，用户可能会有奇怪的行为。

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