외부 JSON 데이터 소스에서 Google지도에 마커를 추가하는 방법은 무엇입니까?

지도에서 Google지도 마커를 API의 위치로 가져 오려고합니다. 모든 JSON 데이터를 계산하고 어레이 내부에 "드라이버 이름, 드라이버 위도 및 드라이버 경도"를 넣는 for 루프를 만들려고했습니다. 그런 다음이 배열을 사용하여 Google지도에서지도의 위치를 고정 해제해야합니다. 아래 코드 예제 :외부 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);

이 코드는 항상 내 위치를 다시로드하려고하기 때문에 일정한 간격을두고 있습니다. Google 크롬 개발자 도구에서 오류가 발견되었지만 오류가 발생했습니다. 이것에 대한 쉬운 해결책이 있습니까? 진짜 "너트 크래커".

미리 감사드립니다.

잭

출처

2013-04-11 Jack

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

당신이 다른 곳에서이 코드를 복사나요 이제 코드를 시도 :

은 보라? –

다음 소스 중 일부를 복사했습니다. http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example 그런 다음 드라이버를 얻으려고 코드를 입력하려고 시도했습니다. 내 API. – Jack

코드에 오류가있는 것 같습니다. 중괄호를 제외하고. 실제로 N을 선언하는 for 루프를 가지기 전에 N을 사용하십시오. 추가 :

항상 맵 오브젝트를 재 작성하면 안됩니다. maps 개체는 호출되는 함수 외부에 있어야합니다.

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>

출처

2013-04-11 15:45:22

고맙습니다. :) 나는 지금 매우 행복하다! – Jack

외부 JSON 데이터 소스에서 Google지도에 마커를 추가하는 방법은 무엇입니까?

답변

관련 문제