0

マーカーに従ってマップをズームする方法を教えてください。実際、私は住所をジオコーディングしており、マーカーが地図上に表示されています。addressesしかし、それらは中央に配置されていません。つまり、マップをドラッグして他のマーカーを表示する必要があります。配列にあるアドレスを使用して、マップを境界に合わせる必要があります。これはどのように行うことができますか。ジオコーディングの現在のコードは次のとおりです。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var addresses = new Array();
abc = document.getElementsByTagName('td');
//loc = mydiv.getAttribute("data-addr");
var l = abc.length; 
 for (var i=0; i < l; i++){
    if (abc[i].hasAttribute('name'))
    {   
        addresses.push(""+abc[i].innerHTML+""); //removed single quotes here. see previous code
    }   
}
var len = addresses.length;
var geocoder;
var map;
var add = document.getElementById("addr").value;
window.onload = function init() {

      geocoder = new google.maps.Geocoder();    
      var add = document.getElementById("address").value;
      var latlng = codeAddress(add);
      var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById("map_canvas"),
          myOptions);
}

//for (var i = 0; i < addresses.length; i++)
//{
    function codeAddress(add) 
    {
      //var addr = addresses[i];
      geocoder.geocode( { 'address':add }, function(results, status) {

          if (status == google.maps.GeocoderStatus.OK) {
             map.setCenter(results[0].geometry.location);     
          } else {
              alert("Geocode was not successful for the following reason: " + status);
          }
        });
    }

    function createMarkers()
    {
        for(var i = 0; i < len; i++){
            (function(addresses){
                geocoder.geocode( { 'address': addresses }, function(results) {
                    var marker = new google.maps.Marker ({
                        map: map,
                        position: results[0].geometry.location,//error:results[0] is undefined
                        title: address
                    }); 

                    google.maps.event.addListener(marker, 'click', function() {
                        alert(addresses);
                    });
                });
            })(addresses[i]);
        }
    }
    window.onload = createMarkers;
</script>
4

1 に答える 1

1

マーカーを作成している関数では、境界を拡張することもできます (

function createMarkers()
{
    //create the bounds for the map
    var bounds = new google.maps.LatLngBounds();

    for(var i = 0; i < len; i++){
        (function(addresses){
            geocoder.geocode( { 'address': addresses }, function(results) {
                var marker = new google.maps.Marker ({
                    map: map,
                    position: results[0].geometry.location,//error:results[0] is undefined
                    title: address
                }); 

                google.maps.event.addListener(marker, 'click', function() {
                    alert(addresses);
                });
            });
        })(addresses[i]);

        //extend the bounds with each address
        bounds.extend (addresses[i]);
    }
    //fit to the full list of bounds
    map.fitBounds(bounds); 
}

実際の境界に関係なく最大ズーム レベルを設定する場合は、これを map.fitBounds の後に追加できます (ズームのレベルを変更できます)。

var listener = google.maps.event.addListener(map, "idle", function() { 
if (map.getZoom() > 10) map.setZoom(10); 
  google.maps.event.removeListener(listener); 
});
于 2013-11-12T10:54:38.530 に答える