如何從外部JSON數據源在Google地圖上放置標記？

我正嘗試在地圖上放置一些Google地圖標記，並使用API的位置。我試圖做一個for-loop計算所有JSON數據，並在數組中放入「A drivers name，a drivers latitude and a driver longitude」。那麼這個數組是否應該幫助谷歌地圖在地圖上標出這些位置。下面的代碼示例：如何從外部JSON數據源在Google地圖上放置標記？

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

此代碼是一個區間內，由於我希望它在所有的時間重裝theese位置。我查看了Google Chrome網絡開發者工具中的錯誤，但後來發現了更多錯誤。有沒有簡單的解決方案？一個真正的「堅果餅乾」。

在此先感謝！

傑克

來源

2013-04-11 Jack

試行代碼現在... – 2013-04-11 15:46:15

你從別的地方複製這個代碼？ – 2013-04-11 16:01:33

我從這個源複製它的一些：http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example然後試圖把我的代碼從驅動程序我的API。 – Jack 2013-04-11 16:02:55

似乎有相當代碼中的一些錯誤。除大括號外，例如您在使用N之前，實際上已經聲明瞭N的for循環。此外：

您不應該一直重新創建地圖對象。地圖對象應該在被調用的函數之外。

JSON調用應該是您的SetInterval函數中唯一的東西。從本質上講，每次調用inerval時，都會清除並設置標記。

我認爲某件事情接近，這是更好的：

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

的具體例子但是卻丟失了，你需要刪除以前的標誌，只添加了新的，並添加信息框。

看一看：http://jsfiddle.net/xu7wL/

來源

2013-04-11 15:45:22

非常感謝。 :)我現在很開心！ – Jack 2013-04-11 16:59:31

如何從外部JSON數據源在Google地圖上放置標記？

回答

相關問題