는하여 GLatLng에 메시지가

Question

내 코드 좌표 추가하는 리버스 지오 코딩을 도와 드릴까요. 문제는입니다. 더 이상 좌표가 없기 때문에지도에서 #message div를 추가하기 위해 좌표를 선택할 수 없습니다.

var markers = [ 
    [39.729308,-121.854087], 
    [39.0,-121.0] 
    ]; 

    for (var i = 0; i < markers.length; i++) { 
     var point = new GLatLng(markers[i][0], markers[i][1]); 
     marker = new GMarker(point); 
     map.addOverlay(marker); 
     markers[i] = marker; 
    } 

하지만 (이 jsbin에 주석) 나는 원래 좌표 코드를 사용할 때

/* Message 
--------------------*/ 
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE)); 

    function displayPoint(marker, index){ 
     $("#message").hide(); 

     var moveEnd = GEvent.addListener(map, "moveend", function(){ 
      var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng()); 
      $("#message") 
       .fadeIn() 
       .css({ top:markerOffset.y, left:markerOffset.x }); 

      GEvent.removeListener(moveEnd); 
     }); 
     map.panTo(marker.getLatLng()); 
    } 

작동 :

는 나는이 부분에서 뭔가를 잘못하고 있어요 의심 이 현재 코드로 작업하려면 도움이 필요합니다.

function showAddress(markers) { 
    if (geocoder) { 
     geocoder.getLatLng(markers, 
      function(point) { 
       if (!point) { 
        alert(markers + " not found"); 
       } else { 
        marker = new GMarker(point); 
        map.addOverlay(marker); 
        markers[i] = marker; 
       } 
      } 
     ); 
    } 
} 

for (var i = 0; i < markers.length; i++) { 
    showAddress(markers[i]); 
} 

Google지도 api 때문에 내가 잘못하고있는 것에 대한 통찰력이 도움이 될 것입니다. 감사합니다.]

Answer 1

난 당신의 코드를 잘못 꽤 몇 가지 있었다 두려워 : P

나는 성형 수술의 비트를해야했다은 그러나 여기에서 결과의는 : http://jsbin.com/atofe

다음은 설명입니다 내가 한 변화들. 이해에 도움이 필요하면 알려주세요. 이 오류의 원인이 된 이후

---

<script type="text/javascript"> 
    document.write(marker); 
</script> 

나는이 주석했다. 실수로 거기에 버려진 것 같아요.

<script type="text/javascript"> 
    // document.write(marker); 
</script> 

---

var markers = [ 
    ["624 Nord Ave #20, Chico CA"], 
    ["200 Nord Ave, Chico CA"], 
    ["100 Nord Ave, Chico CA"], 
    ["5th and Ivy, Chico CA"] 
]; 

우리가 대신 좌표의 주소를 사용하고 있기 때문에, 당신은 할 필요가 없습니다 (사실은 그것은 단지 일을 복잡하게하지 말아야 때문에) 배열의 각 문자열을 캡슐화합니다. 또한 더 명확하게하고 실제 마커와의 충돌을 방지하기 위해 이름을 addresses으로 변경했습니다 (자세한 내용은 나중에 설명). 나는 대부분의 변경했습니다 곳

var addresses = [ 
    "624 Nord Ave #20, Chico CA", 
    "200 Nord Ave, Chico CA", 
    "100 Nord Ave, Chico CA", 
    "5th and Ivy, Chico CA" 
]; 

---

function showAddress(markers) { 
    if (geocoder) { 
    geocoder.getLatLng(markers, 
     function(point) { 
     if (!point) { 
      alert(markers + " not found"); 
     } else { 
      marker = new GMarker(point); 
      map.addOverlay(marker); 
      markers[i] = marker; 
     } 
     } 
    ); 
    } 
} 

for (var i = 0; i < markers.length; i++) { 
    showAddress(markers[i]); 
} 


/* Add Markers to List 
--------------------*/ 
$(markers).each(function(i,marker){ 
    $("<li>") 
    .html(i+" - "+marker) 
    .click(function(){ 
     displayPoint(marker, i); 
    }) 
    .appendTo("#list"); 
    GEvent.addListener(marker, "click", function(){ 
    displayPoint(marker, i); 
    }); 
}); 

이입니다. 몇 가지 중요한 실수를 저질렀습니다.

먼저 새 이름을 사용해야 할 때 변수 markers을 다시 사용했습니다.이 과정에서 주소 문자열의 배열을 작성하고 물건이 저장되는 곳을 오해했습니다 (주소 문자열의 배열 이름을 addresses으로 변경 한 이유입니다).

두 번째로 에 마커를 추가하기 전에 지오 코더가 실제로 응답을 반환했습니다. getLatLng이 비동기 함수라는 사실을 깨닫지 못했기 때문에 지오 코더가 응답을 리턴 한 후에 만 ​​콜백 함수를 실행합니다. 응답을 기다리지 않았으므로 아직 마커가 검색되지 않았으므로 "목록에 마커 추가"섹션이 쓸모가 없습니다.

따라서 이러한 문제를 해결하기 위해 새로운 handleGeocoderResponse 함수 안에 "마커를 목록에 추가"섹션을 옮겼습니다. 이렇게하면 지오 Z 더 응답이 리턴 된 후에 만 ​​마커가 목록에 추가됩니다. 또한 비동기 함수와 함께 루프를 사용하기 때문에 double-closure을 사용해야했습니다.

function handleGeocoderResponse(addr, j) { 
    /* 
    These are closures. We have to return a function 
    that contains our Geocoder repsonse handling code 
    in order to capture the values of "addr" and "j" 
    as they were when they were passed in. 
    */ 
    return (function(point) { 

    if (!point) { 
     alert(addr + " not found"); 
    } 
    else { 
     var marker = new GMarker(point); 
     map.addOverlay(marker); 

     /* Add markers to list 
     ------------------------*/ 
     $("<li>") 
     .html(j + " - " + addr) 
     .click(function(){ 
      displayPoint(marker, j); 
     }) 
     .appendTo("#list"); 

     GEvent.addListener(marker, "click", function(){ 
     displayPoint(marker, j); 
     }); 
    } 

    }); 
} 

for (var i = 0; i < addresses.length; i++) { 
    if (geocoder) { 
    var address = addresses[i]; 
    geocoder.getLatLng(
     address, 
     handleGeocoderResponse(address, i) 
    ); 
    } 
} 

Answer 2

나는 당신이 무엇을 찾고 있는지 잘 모르겠습니다. "#message div"에 의해 과 같은 info window을 의미합니까? 그렇다면, 당신은합니다 (GEvent.addListener() 라인을 참고) 다음의 라인 사이에 뭔가를 할 수 :

/* Geocoded Addresses 
--------------------*/ 
var markers = [ 
["624 Nord Ave #20, Chico CA"], 
["200 Nord Ave, Chico CA"], 
["100 Nord Ave, Chico CA"], 
["5th and Ivy, Chico CA"] 
]; 

function showAddress(markers) { 
if (geocoder) { 
    geocoder.getLatLng(markers, 
    function(point) { 
    if (!point) { 
    alert(markers + " not found"); 
    } else { 
    marker = new GMarker(point); 
    GEvent.addListener(marker, 'click', function() { 
     marker.openInfoWindowHtml('<strong>Awesome place</strong><br>746 Blah street<br>1337 Awesomeville'); 
    }); 
    map.addOverlay(marker); 
    markers[i] = marker; 
    } 
    } 
); 
} 
} 

for (var i = 0; i < markers.length; i++) { 
showAddress(markers[i]); 
} 

Try it out는 마커를 클릭 이동! :)