문제

내 코드: http://jsbin.com/epuxu

의 도움으로 그래요,주소로 코드와 그에 따라 핀 배치도. 문제입 지의 좌표를 선택하기 위해 추가#메시지 div 하에 그것도 없기 때문에 좌표 더 이상입니다.

내가 의심되 내가 뭔가 잘못된 이 섹션에서는:

/* 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());
    }

그것은 작품을 사용할 때 원래의 좌표 코드(이것은 주석으로 처리에 jsbin):

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

그러나 도움이 필요와 함께 작동하는 이 현재 코드:

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 maps api,그래서 어떤 통찰력에서 제가 뭘 잘못하고 있어 매우 도움이 될 것입니다.감사합니다=]

도움이 되었습니까?

해결책

나는 두려워 있었다 꽤 몇 가지 잘못된 코드: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 는 비동기식 기능,그래서 그것을 콜백 함수를 실행한 후에만 지오코더를 반환합 반응이다.이후까지 기다리지 않았고,응답을 렌더링"마커를 추가 목록"섹션으로 쓸모 없는 마커를 아니었 검색 yet.

그래서,이러한 문제를 해결하기 위해 이동하는"마커를 추가 목록"섹션 안에 새로운 handleGeocoderResponse 기능입니다.이것은 마커 목록에 추가한 후에만 지오코더를 응답이 반환됩니다.나도를 사용했 더블폐쇄 때문에 우리가 사용하는 루프와 함께하는 비동기 기능이다.

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

다른 팁

당신이 정확히 무엇을 찾고 있는지 잘 모르겠습니다. 에 의해 "#message div", 당신은 의미합니까? 정보 창 처럼 이것? 그렇다면 다음 줄 사이에서 무언가를 할 수 있습니다 (참고 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]);
}

시도해보십시오, 마커를 클릭하십시오! :)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top