使用 AJAX 选项卡切换地图 - Google Maps API

Question

我正在尝试使用 Google Maps API v3 JS 代码设置 Google Maps。我有多个选项卡，单击它们会打开 AJAXed 内容页面，而无需重新加载原始页面。每个选项卡式内容都包含一个地图。下面是我如何设置地图的示例。请注意，这里的列表元素只是一个示例，每个选项卡包含许多位于不同位置的项目。

<script type="text/javascript">
var locations = new Array();
</script>
<div id="googlemap"><div>Loading..</div></div>
<ul>
    <li>#1 - My Place, Euless, TX
    <script type="text/javascript">
        locations.push(['#1 - My Place','Euless, TX']);
    </script>
    </li>
    <li>#2 - My Other Place, Dallas, TX
    <script type="text/javascript">
        locations.push(['#2 - My Other Place','Dallas, TX']);
    </script>
    </li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#googlemap div').remove();
    if(locations.length>0)
    {
        var map = new google.maps.Map(document.getElementById('googlemap'), {
          zoom: 3,
          center: new google.maps.LatLng(38.065392,-97.382812),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i=0;i<locations.length;i++) {
            var thelocation = locations[i];
            jQuery.ajax({
                dataType: 'jsonp',
                url: 'http://maps.google.com/maps/geo?output=json&oe=utf8&sensor=false&key=BLAHBLAH&q='+thelocation[1],
                cache: false,
                success: function(data){
                    if(data.Status.code==200)
                        {
                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(data.Placemark[0].Point.coordinates[1],data.Placemark[0].Point.coordinates[0]),
                                map: map
                            });
                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                return function() {
                                    infowindow.setContent(thelocation[0]);
                                    infowindow.open(map, marker);
                                }
                            })(marker, i));
                        }
                }
            });
        }
    }
});
</script>

我目前在销毁以前的地图并加载新地图时遇到了很多麻烦。加载选项卡式内容时，地图元素会向上和向左移动。 Google Maps UI 仍然出现在正确的位置，但地图内容本身向上/向左移动。拖动地图时，它会稍微移动直到某个点，然后可见区域会被剪回到同一视图区域附近。任何人都可以帮助我处理通过 AJAX 加载新地图的问题吗？

Answer 1

您必须创建一个触发器以将 DIV 大小更改与地图的调整大小事件联系起来。

开发者应该触发这个事件 当 div 改变大小时在地图上： google.maps.event.trigger（地图， '调整大小'）。