Google Maps JS v3 - Basit Çoklu Marker Örnek API

SORU

17 HAZİRAN 2010, PERŞEMBE

Google Maps JS v3 - Basit Çoklu Marker Örnek API

Oldukça yeni Google Maps Apı için. Dolaşmak ve bir harita üzerinde arsa istediğim veri dizisi var. Oldukça basit görünüyor, ama ben buldum multi-marker Tüm Dersler oldukça karmaşıktır.

Kullanın, örneğin: google siteden veri dizisi sağlar

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

Ben sadece tüm bu noktaları arsa ve bir infoWindow adını görüntülemek için tıklandığında açılır.

Herhangi bir yardım büyük beğeni topluyor!

CEVAP

17 HAZİRAN 2010, PERŞEMBE

Bu azaltmak için yapabileceğim en basit olanıdır:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i  ) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

Ekran görüntüsü:

Google Maps Multiple Markers

Bazı sihirli kapatma addListener yöntemine geri arama bağımsız değişkeni geçirmeden oluyor. Bu kilitler nasıl çalıştığını biliyorsanız, oldukça zor bir konu olabilir. Tavsiyem eğer durum buysa, kısa bir giriş için aşağıdaki Mozilla makale diye kontrol ediyorum: