自动缩放以适应 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. 您永远不会将它们放入标记数组中。
3. initMarkers 不存在。

proof of concept fiddle

代码 sn-p：

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>