Google Maps’te harici JSON veri kaynaklarından nasıl işaretçi yerleştirilir?

Haritanızda bir API'dan konumla bazı Google Haritalar işaretçileri kullanmaya çalışıyorum. Tüm JSON verilerini sayan ve bir dizi içinde "Bir sürücü adı, bir sürücü enlemi ve bir sürücü boylamı" koyan bir döngü oluşturmaya çalıştım. Ardından, bu dizi, Google Haritalar'ın bu yerleri haritada eşlemesine yardımcı olur. Aşağıdaki kod örneği: Ben her dönemde Postadölesan pozisyonları yeniden yüklemek istiyor nedeniyleGoogle Maps’te harici JSON veri kaynaklarından nasıl işaretçi yerleştirilir?

setTimeout(function() { 

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

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

    var marker, i; 

    var url = "http://blackcab.didair.se/api/drivers"; 
    var name; 
    var lat; 
    var lon; 
    var locations; 

    $.getJSON(url, 

    function (response) { 
     name = response.drivers[n].name; 
     lat = response.drivers[n].currentLat; 
     lon = response.drivers[n].currentLon; 
     for (var n = 0; n < response.drivers.length; n++) 
     var locations = [ 
      [name, lat, lon, n], ]; 
     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)); 
     }); 
}, 3000);

Bu kod, bir aralık içindedir. Google Chrome web geliştirici aracında aldığım hatalara baktım, ancak daha fazla hata buldum. Bunun için kolay bir çözüm var mı? Gerçek bir "fındık-kraker".

Şimdiden teşekkürler!

Jack

kaynak

2013-04-11 Jack

http://jsfiddle.net/xu7wL/ ... –

Eğer başka bir yerden bu kodu kopyalayıp mı şimdi kodunu çalışılıyor:

göz at? –

Bazılarını bu kaynaktan kopyaladım: http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example Daha sonra sürücüleri almak için koduma girmeye çalıştım API'm – Jack

O kodunuzda epeyce hata vardı görünüyor. Kıvrımlı parantezler hariç, ör. Aslında, N'yi bildiren önce n'ye sahip olmanızdan önce N'yi kullanıyorsunuz Ek:

Harita nesnesini her zaman yeniden oluşturmamanız gerekir. Haritalar nesnesi çağrılan işlevin dışında olmalıdır.

JSON çağrısı, SetInterval İşlevinizdeki tek şey olmalıdır. Esasen, inerval çağrıldığında işaretleyicileri temizler ve ayarlarsınız.

bir şey bu daha iyi yaklaşan düşünüyorum: spesifik bir örnek ancak, önceki işaretleri kaldırmak sadece yenilerini eklemek ve bilgi kutusu eklemek gerektiğini eksik

<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 src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript"> 

    var image = { 
    url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag.png', 
    // This marker is 20 pixels wide by 32 pixels tall. 
    size: new google.maps.Size(20, 32), 
    // The origin for this image is 0,0. 
    origin: new google.maps.Point(0,0), 
    // The anchor for this image is the base of the flagpole at 0,32. 
    anchor: new google.maps.Point(0, 32) 
    }; 
    var shadow = { 
    url: 'https://developers.google.com/maps/documentation/javascript/examples/images/beachflag_shadow.png', 
    // The shadow image is larger in the horizontal dimension 
    // while the position and offset are the same as for the main image. 
    size: new google.maps.Size(37, 32), 
    origin: new google.maps.Point(0,0), 
    anchor: new google.maps.Point(0, 32) 
    }; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: new google.maps.LatLng(62.457171, 17.350953), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

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

    setTimeout(function() { 
     loadData(); 
    },500); 


    function loadData() 
    { 
     //alert("Loading"); 
     var marker, i; 

     var url = "http://blackcab.didair.se/api/drivers"; 
     var name; 
     var lat; 
     var lon; 
     var locations; 

     $.getJSON(url, function (response) {handleData(response)}); 
    } 

    function handleData(response) 
    { 
     //alert(response); 
     var n; 
     for(n=0; n<response.drivers.length; n++) 
     { 
      name = response.drivers[n].name; 
      //alert(name); 
      lat = response.drivers[n].currentLat; 
      lon = response.drivers[n].currentLon; 
      var myLatLng = new google.maps.LatLng(lat,lon); 
      var marker = new google.maps.Marker({ 
       position: myLatLng, 
       shadow: shadow, 
       icon:image, 
       map: map, 
       title: name, 
       zIndex: 1 
      }); 
     } 
    } 



    </script> 
</body> 
</html>

kaynak

2013-04-11 15:45:22

Çok teşekkür ederim. :) Şu an çok mutluyum! – Jack

Google Maps’te harici JSON veri kaynaklarından nasıl işaretçi yerleştirilir?

cevap

İlgili konular