0

クリック可能なマーカーがあり、ズーム レベルがマップ上のマーカーの量に適応する Google マップを作成しようとしています。次のコードは正しくないとわかっていますが、理由がわかりません。私がどこで間違っているかについてのポインタは大歓迎です!

<script type="text/javascript">
function initialize() {

  // My options
  var myOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }

  // Create map on #map_canva
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // Define boundarys
  var markerBounds = new google.maps.LatLngBounds();

  // Create array
  var countries = [
      {title:'Theatre by the Lake', lat:54.32223562211788, lon:-2.742498400000045, content:"<h2>Theatre by the Lake</h2>"},
      {title:'Pirelli International Rally',  content:"<h2>Pirelli International Rally</h2>"},
      {title:'Lowther Castle',  content:"<h2>Lowther Castle</h2>"},
      {title:'South Lakes Wild Animal Park',  content:"<h2>South Lakes Wild Animal Park</h2>"},
      {title:'Cumbria Karting',  content:"<h2>Cumbria Karting</h2>"},
  ];

  // Create markers
  for (var i = 0; i < countries.length; i++) { 
      var c = countries[i]; 
      c.marker = new google.maps.Marker({
          position: new google.maps.LatLng(c.lat, c.lon), 
          map: map,
          icon: '/display_images/icon_stockist.png',
          title: c.title});
      c.infowindow = new google.maps.InfoWindow({content: c.content}); 
      google.maps.event.addListener(c.marker, 'click', makeCallback(c)); 
      // Create marker bounds
      markerBounds.extend(countries);
  } 

  // Create info windows based on above content
  function makeCallback(country) { 
      return function () { 
          country.infowindow.open(map, country.marker); 
      }; 
  }
}

// Fit map to marker boundaries
map.fitBounds(markerBounds);
</script>
4

1 に答える 1

1

あなたの問題は、マップを初期化関数でローカル変数として作成し、アクセスできない を呼び出すときに、その関数を使用してアクセスしようとするmap.fitBoundsことです。

の中でmap を宣言するかinitialize、初期化関数内で map.fitBounds() を移動します。

また、 を呼び出すときはmarkerBounds.extend(countries);、countries 配列全体を渡しますが、本当に必要なのは単一の LatLng オブジェクトを渡すことです。代わりに次のようにしてみてください。

for (var i = 0; i < countries.length; i++) { 
      var c = countries[i]; 
      var latlng = new google.maps.LatLng(c.lat, c.lon);
      c.marker = new google.maps.Marker({
          position: latlng, 
          map: map,
          icon: '/display_images/icon_stockist.png',
          title: c.title});
      c.infowindow = new google.maps.InfoWindow({content: c.content}); 
      google.maps.event.addListener(c.marker, 'click', makeCallback(c)); 
      // Create marker bounds
      markerBounds.extend(latlng);
  }
于 2013-04-11T14:39:51.627 に答える