谷歌地图与PHP数组中的多个标记 [英] Google maps with multiple markers from a php array

问题描述

你好有一个城市阵列，想用javascript api v3建立一个google地图。
当页面加载地图时，会跳转到每个标记。即使我已经为它设置了高度和宽度，地图也变得非常小。这里是我生成地图的代码

 <脚本> 
 var geocoder; 
 var map; 
 var timeout = 600; 
 var address_position = 0; 
 var address = [
<？php 
 foreach（$ cities_in_country as $ item）
 {
 echo''。$ item ['name']。  ''; 
} 
？> 
]; 
 $ b $函数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 
}）; 
} 
}）; 
 
 
 $ b函数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）; 
 
 
 
 $ b $（document）.ready（function（）{
 codeaddress（）; 
 
}） ; 
< / script> 
  

和

 < div id =map_canvasstyle =width：640px; height：420px;>< / div> 
  

解决方案

地图不断跳到每个标记。 - 这是因为您在循环的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）） ; 
} 
  

也许应该是

< pre $ 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））;
}
}


Hi have an array of cities and want to create a google map using the javascript api v3 . When the page loads the map keeps jumping to each marker. Also the the map becomes very small even though i have set a height and width to it .Here is my code for generating the map

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

and

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

解决方案

"the map keeps jumping to each marker." - that's because you call map.setCenter(results[0].geometry.location); within the addMarker function you're looping over. Remove that line and it'll stop recentering the map.

Also, you should change this; there's a danger that if you go over the query limit then you'll keep calling addMarker just with a longer timeout.

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

should maybe be

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

这篇关于谷歌地图与PHP数组中的多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！