5

複数のマップ マーカーを使用しています。現在map.fitBounds(bounds);、JavaScript を使用してマップのサイズを変更しています。境界には複数のLatLngオブジェクトが含まれます。

私は何を間違っていますか？ズームアウトしすぎたので:-(

ここに画像の説明を入力

JavaScript ソース

var geocoder, map;
$(document).ready(function(){
    var coll_gmap = $(".gmap");
    if ( coll_gmap.length != 0 )
    {
        //initiate map
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 13,
            center: latlng,
           mapTypeControl: true,
            navigationControl: true,
            scaleControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var bounds = new google.maps.LatLngBounds();
        //loop all addressen + insert into map
          map = new google.maps.Map(coll_gmap[0], myOptions);
        coll_gmap.each(function(index)
        {
             if (geocoder) {
                    geocoder.geocode( { 'address': $(this).attr("address")}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            bounds.extend(results[0].geometry.location);

                            var marker = new google.maps.Marker({
                                map: map, 
                                position: results[0].geometry.location
                            });
                        } else {
                            console.log("Geocode was not successful for the following reason: " + status);
                        }//end if status
                    }); //end if geocoder.geocode
                } //end if geocoder   

        }) //end coll_gmap each
        map.fitBounds(bounds);

        }//end if coll_gmap length
       /* console.log("Script created by NicoJuicy");*/   
}); //end onload

HTML ソース

<div class="gmap" address="SomeAddress1" style="width:700px;height:350px"></div>
<div class="gmap" address="someAddress2"></div>
4

5 に答える 5

13

fitBounds()メソッドは機能するはずです。ただし、マップのサイズには常にいくらかのパディングが保持されることに注意してください。次の例を検討してください。

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps fitBounds Padding</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 543px; height: 350px;"></div> 

   <script type="text/javascript"> 
      var map = new google.maps.Map(document.getElementById('map'), { 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
      });

      var bounds = new google.maps.LatLngBounds();

      var points = [
        new google.maps.LatLng(51.22, 4.40),
        new google.maps.LatLng(50.94, 3.13)
      ];

      // Extend bounds with each point
      for (var i = 0; i < points.length; i++) {
        bounds.extend(points[i]);
        new google.maps.Marker({position: points[i], map: map});
      }

      // Apply fitBounds
      map.fitBounds(bounds);  

      // Draw the bounds rectangle on the map
      var ne = bounds.getNorthEast();
      var sw = bounds.getSouthWest();

      var boundingBox = new google.maps.Polyline({
        path: [
          ne, new google.maps.LatLng(ne.lat(), sw.lng()),
          sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne
        ],
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });

      boundingBox.setMap(map);
   </script> 
</body> 
</html>

上記の例のスクリーンショット:

Google マップの fitBounds パディング

赤いバウンディング ボックスは、LatLngBounds両方のマーカーで拡張したときのオブジェクトを表します。マップ キャンバスが543px広いことに注意してください。また、バウンディング ボックスの左右のパディング マージンにも注意してください。

ここで1px、 を使用して地図キャンバスの幅を だけ縮小する542pxと、fitBounds()メソッドはより低いズーム レベルにポップします。

Google マップの fitBounds パディング

于 2010-07-14T23:11:14.630 に答える
5

右の「関連」リンクからここにたどり着きましたが、あなたの問題に対する答えは前の質問と同じだと思います。:p

問題は、マップをパン/ズームする関数を使用するたびに、スクリプトは、準備が整うまで、同様の新しい入力を無視することです。したがって、これを検出し、それが受け入れられたときにのみ fitBounds() を呼び出す必要があります。交換してみてください

map.fitBounds(bounds);

と

var listener = google.maps.event.addListener(map, "idle", function() { 
               map.fitBounds(bounds);
               google.maps.event.removeListener(listener); });

幸運を。

于 2010-11-03T15:37:47.727 に答える
1

setZoom 関数を使用するだけです。

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': zipcode }, function(results, status)
{
    if (status == google.maps.GeocoderStatus.OK)
    {
        map.setCenter(results[0].geometry.location);
        map.setZoom(12);
    }
    else
    {
        alert(zipcode + " not found" + "\nstatus : " + status);
    }
});
于 2012-12-03T18:07:08.160 に答える
0

私は解決策を見つけました。

シングルを行う代わりに

bounds.extend(myLatLng)

myLatLngを境界に追加するたびに、これらのアクションを実行します

bounds = map.getBounds();
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);

これが誰かに役立つことを願っています！

于 2010-07-16T09:03:31.887 に答える