带有来自 php 数组的多个标记的 Google 地图答案

【问题标题】：Google maps with multiple markers from a php array带有来自 php 数组的多个标记的 Google 地图
【发布时间】：2011-11-17 15:13:15
【问题描述】：

您好，您有一系列城市，想使用 javascript api v3 创建谷歌地图。当页面加载时，地图会不断跳转到每个标记。即使我为它设置了高度和宽度，地图也会变得非常小。这是我生成地图的代码

<script>
var geocoder;
var map;
var timeout = 600;
var address_position = 0;
var address = [
     <?php
        foreach($cities_in_country as $item)
        {
            echo '"'.$item['name'].'",';
        }       
     ?>             
     ];

    function addMarker(position)
    {
        geocoder.geocode({'address': address[position]}, function(results, status)
        {
            address_position++;
            if (address_position < address.length)
            {
                setTimeout(function() { addMarker(address_position); }, (timeout));
            }
            if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
            {
                setTimeout(function() { addMarker(position); }, (timeout * 3));
            }
            else if (status == google.maps.GeocoderStatus.OK) 
            {   map.setCenter(results[0].geometry.location);                
                var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,                   
                    icon:"<?=base_url()?>assets/goo/images/icons/marker.png",                            
                });           
            } 
        });
    }


function codeaddress() {

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 6,
      center: latlng,      
     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
     mapTypeId: google.maps.MapTypeId.ROADMAP,      
    }   
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     addMarker(address_position);


}

$(document).ready(function() {      
    codeaddress();

}); 
</script>

和

<div id="map_canvas" style="width: 640px; height: 420px;"></div>

【问题讨论】：

标签： google-maps-api-3

【解决方案1】：

“地图不断跳到每个标记处。” - 那是因为你在循环的 addMarker 函数中调用了map.setCenter(results[0].geometry.location);。删除那条线，它将停止重新定位地图。

另外，你应该改变它；如果您超过查询限制，那么您将继续调用 addMarker ，但超时时间较长。

        if (address_position < address.length)
        {
            setTimeout(function() { addMarker(address_position); }, (timeout));
        }
        if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
        {
            setTimeout(function() { addMarker(position); }, (timeout * 3));
        }

应该是

if (address_position < address.length)
{
    if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
    {
        setTimeout(function() { addMarker(position); }, (timeout * 3));
    } else {
        setTimeout(function() { addMarker(address_position); }, (timeout));
    }
}

【讨论】：