0

多くのマーカーを含むマップを表示する必要があり、それに応じてマップのサイズを自動調整したいと考えていました。

このサイトでこれに対する解決策をすでに見つけたので、次の行を追加します

bounds.extend(myLatlng); map.fitBounds(境界);

ここに完全なコード

<script type="text/javascript">

    var map;
    var coords = new Object();
    var markersArray = [];
    coords.lat = -15.788;
    coords.lng = -47.900;
    var bounds = new google.maps.LatLngBounds();


    function plotPoint(srcLat,srcLon,color,num,idCat,cep,message)
    {
        var pinColor = color;
        var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));
        var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
            new google.maps.Size(40, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(12, 35));

            var myLatlng = new google.maps.LatLng(srcLat, srcLon);            
            var marker = new google.maps.Marker({
                  position: myLatlng, 
                  map: map, 
                  icon: pinImage,
                  shadow: pinShadow
              });
            boxText = document.createElement("div");
            var myOptions = {               
                content: boxText,
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-70, -7),
                zIndex: null,
                boxStyle: {
                    opacity: 0.85,
                    width: "140px"
                },

                closeBoxURL: "",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false
            };
            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;text-align: center;";
            boxText.innerHTML = message;

            var ib = new InfoBox(myOptions);
              google.maps.event.addListener(marker, 'mouseover', function() {
                ib.open(map,marker);
                ib.show();
              });
              google.maps.event.addListener(marker, 'mouseout', function() {
                ib.hide();
              });

             google.maps.event.addListener(marker, 'click', function() {
                window.location = "browse.php?id="+idCat+"&cep="+cep;});

            bounds.extend(myLatlng);
            map.fitBounds(bounds);
                    map.setZoom(12);

    }
    function initialize() 
    {      

        var latlng = new google.maps.LatLng(coords.lat, coords.lng);
        var myOptions = {
          zoom: 12,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_div"),  myOptions);     

    }   

</script>

このコードは、複数のマーカーがある場合に完全に機能しますが、マーカーが 1 つしかない場合はズームインが最大に設定されます。setzoomメソッドを使用しようとしましたが、何もしないようです。

誰かが私が間違っていることを教えてもらえますか?

事前にどうもありがとう。ホセ

更新: Google Maps API V3 で fitBounds() を使用した後に setZoom() を使用するこちらの手順に従って解決 しました

私が追加したコード

zoomChangeBoundsListener = 
            google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
                if (num_markers = 1){
                    this.setZoom(12);
                }
            });
        setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);
4

1 に答える 1