自动缩放以适应Google Maps V3上的标记 [英] Autozoom to fit markers on Google Maps V3

问题描述

我试图按照Google地图上的自动缩放说明进行操作，以便它始终适合地图上的标记。但我无法让它工作。任何人都可以看到我的代码有什么问题吗？

 < script> 
 
函数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 beliggendepå enskøngrund med mange'
}）; 
 
 
 var marker = new google.maps.Marker（{
 position：{lat：55.5577227947，lng：8.1225042121}，
 label：1，
 map：map，
 title：'Lækkertsommerhus beliggendepåen dejlig naturgrund'
}）; 
 
 var marker = new google.maps.Marker（{
 position：{lat：55.5570797278，lng：8.1276749566}，
 label：2，
 map ：map，
 title：'Sommerhus medstråtagbeliggendepåen meget stor grund med mangefyrretræerog'
}）; 
 
 var marker = new google.maps.Marker（{
 position：{lat：55.56169，lng：8.13126}，
 label：3，
 map ：map，
 title：'Detteskønneferiehusfremstårutroligt flot'
}）; 
 
 var marker = new google.maps.Marker（{
 position：{lat：55.5560563333123，lng：8.12075257301331}，
 label：4，
 map ：map，
 title：'Spændende，velholdt，stråtæktferiehus i sten，beliggendepå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样式入口点，必要时更改
 $（document）.ready（function（）{
 initMap（）; 
 initMarkers（）; 
 
 for（var i in markers）
 {
 bound.extend（markers [i] .getPosition（））; 
} 
 map.fitBounds（绑定）; 
}）; 
 
} 
< / script> 
  

任何帮助都将非常感谢！

解决方案

1. 您的所有标记都具有相同的名称。


2. 您不会将它们放入标记数组中。 / li>
   
3. initMarkers 不存在。
   

概念证明小提琴

< >代码段：
$ b

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 beliggendepåenskøngrund med mange'}）; markers.push（标记）; var marker = new google.maps.Marker（{position：{lat：55.5577227947，lng：8.1225042121}，label：1，map：map，title：'Lækkertsommerhus beliggendepåen dejlig naturgrund'}）; markers.push（标记）; var marker = new google.maps.Marker（{position：{lat：55.5570797278，lng：8.1276749566}，label：2，map：map，title：'Sommerhus medstråtagbeliggendepåen meget stor grund med mangefyrretræerog' }）; markers.push（标记）; var marker = new google.maps.Marker（{position：{lat：55.56169，lng：8.13126}，label：3，map：map，title：'Detteskønneferiehusfremstårutroligt flot'}）; markers.push（标记）; var marker = new google.maps.Marker（{position：{lat：55.5560563333123，lng：8.12075257301331}，label：4，map：map，title：'Spændende，velholdt，stråtæktferiehus i sten，beliggendepådelvis lukket natur '}）; markers.push（标记）; 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（标记）; // initMarkers（）; var bound = new google.maps.LatLngBounds（）; for（var i in markers）{bound.extend（markers [i] .getPosition（））;如果需要的话更改$（document）.ready（function（）{initMap（）;}）;

，＃map-canvas {height：100％;}宽度：100％; margin：0px; < script src =https：//

I tried to follow instructions for autozoom on Google maps so that it always fits to the markers on the maps. But I can't get it to work. Can anyone see what's wrong with my code?

<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>

Any help will be much appreciated!

解决方案

1. All your markers have the same name.
2. You don't ever put them in the markers array.
3. initMarkers doesn't exist.

proof of concept fiddle

code snippet:

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>

这篇关于自动缩放以适应Google Maps V3上的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！