自動縮放以適合Google Maps V3上的標記

Question

我試圖按照說明在Google地圖上進行自動縮放，以使其始終適合於地圖上的標記。 但是我無法正常工作。 誰能看到我的代碼出了什么問題？

<script>

    function initMap() {
        var myLatLng = { lat: 55.561213987, lng: 8.1286275387 };

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 13,
            center: myLatLng    
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Top moderne sommerhus med alle faciliteter beliggende på en skøn grund med mange'
        });


        var marker = new google.maps.Marker({
            position: { lat: 55.5577227947, lng: 8.1225042121 },
            label: "1",
            map: map,
            title: 'Lækkert sommerhus beliggende på en dejlig naturgrund'
        });

        var marker = new google.maps.Marker({
            position: { lat: 55.5570797278, lng: 8.1276749566 },
            label: "2",
            map: map,
            title: 'Sommerhus med stråtag beliggende på en meget stor grund med mange fyrretræer og '
        });

        var marker = new google.maps.Marker({
            position: { lat: 55.56169, lng: 8.13126 },
            label: "3",
            map: map,
            title: 'Dette skønne feriehus fremstår utroligt flot'
        });

        var marker = new google.maps.Marker({
            position: { lat: 55.5560563333123, lng: 8.12075257301331 },
            label: "4",
            map: map,
            title: 'Spændende, velholdt, stråtækt feriehus i sten, beliggende på delvis lukket natur'
        });

        var marker = new google.maps.Marker({
            position: { lat: 55.55282, lng: 8.12843 },
            label: "5",
            map: map,
            title: 'Kun 850 m fra Vesterhavet med den dejlige sandstrand og ca'
        });


        var map;
        var bound = new google.maps.LatLngBounds();
        var markers = new Array();

        //jQuery style entry point, change if necessary
        $(document).ready(function(){
          initMap();
          initMarkers();

          for(var i in markers)
          {
            bound.extend(markers[i].getPosition());
          }
          map.fitBounds(bound);
        });

        }
</script>

任何幫助都感激不盡！

Answer 1

1. 您所有的標記都具有相同的名稱。
2. 您永遠不會將它們放在markers數組中。
3. initMarkers不存在。

概念證明

代碼段：

 function initMap() { var myLatLng = { lat: 55.561213987, lng: 8.1286275387 }; var map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 13, center: myLatLng }); var markers = []; var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Top moderne sommerhus med alle faciliteter beliggende på en skøn grund med mange' }); markers.push(marker); var marker = new google.maps.Marker({ position: { lat: 55.5577227947, lng: 8.1225042121 }, label: "1", map: map, title: 'Lækkert sommerhus beliggende på en dejlig naturgrund' }); markers.push(marker); var marker = new google.maps.Marker({ position: { lat: 55.5570797278, lng: 8.1276749566 }, label: "2", map: map, title: 'Sommerhus med stråtag beliggende på en meget stor grund med mange fyrretræer og ' }); markers.push(marker); var marker = new google.maps.Marker({ position: { lat: 55.56169, lng: 8.13126 }, label: "3", map: map, title: 'Dette skønne feriehus fremstår utroligt flot' }); markers.push(marker); var marker = new google.maps.Marker({ position: { lat: 55.5560563333123, lng: 8.12075257301331 }, label: "4", map: map, title: 'Spændende, velholdt, stråtækt feriehus i sten, beliggende på delvis lukket natur' }); markers.push(marker); var marker = new google.maps.Marker({ position: { lat: 55.55282, lng: 8.12843 }, label: "5", map: map, title: 'Kun 850 m fra Vesterhavet med den dejlige sandstrand og ca' }); markers.push(marker); // initMarkers(); var bound = new google.maps.LatLngBounds(); for (var i in markers) { bound.extend(markers[i].getPosition()); } map.fitBounds(bound); } //jQuery style entry point, change if necessary $(document).ready(function() { initMap(); }); 

 html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas"></div> 

Answer 2

標記未添加到標記數組，因此您要遍歷空白數組。 您需要將標記添加到數組。 您還為所有標記指定了相同的名稱。 請在下面找到固定代碼。

<script>
var map;
var bound = new google.maps.LatLngBounds();
var markers = new Array();

function initMap() {
        var myLatLng = { lat: 55.561213987, lng: 8.1286275387 };

        map = new google.maps.Map(document.getElementById('map-canvas'), {
            zoom: 13,
            center: myLatLng    
        });
    }

   function initMarkers(){


        var marker1 = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Top moderne sommerhus med alle faciliteter beliggende på en skøn grund med mange'
        });
        markers.push(marker1)

        var marker2 = new google.maps.Marker({
            position: { lat: 55.5577227947, lng: 8.1225042121 },
            label: "1",
            map: map,
            title: 'Lækkert sommerhus beliggende på en dejlig naturgrund'
        });
        markers.push(marker2)

        var marker3 = new google.maps.Marker({
            position: { lat: 55.5570797278, lng: 8.1276749566 },
            label: "2",
            map: map,
            title: 'Sommerhus med stråtag beliggende på en meget stor grund med mange fyrretræer og '
        });
        markers.push(marker3)

        var marker4 = new google.maps.Marker({
            position: { lat: 55.56169, lng: 8.13126 },
            label: "3",
            map: map,
            title: 'Dette skønne feriehus fremstår utroligt flot'
        });
        markers.push(marker4)

        var marker5 = new google.maps.Marker({
            position: { lat: 55.5560563333123, lng: 8.12075257301331 },
            label: "4",
            map: map,
            title: 'Spændende, velholdt, stråtækt feriehus i sten, beliggende på delvis lukket natur'
        });
        markers.push(marker5)

        var marker6 = new google.maps.Marker({
            position: { lat: 55.55282, lng: 8.12843 },
            label: "5",
            map: map,
            title: 'Kun 850 m fra Vesterhavet med den dejlige sandstrand og ca'
        });
        markers.push(marker6)
     }





        //jQuery style entry point, change if necessary
        $(document).ready(function(){
          initMap();
          initMarkers();

          for(var i in markers)
          {
            bound.extend(markers[i].getPosition());
          }
          map.fitBounds(bound);
        });


</script>