Question

在SO的帮助下，我设法将地址编码并将其相应的针脚放在地图上。 问题是我无法选择坐标以便在地图上附加#message 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]);
}

我对利用谷歌地图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函数中移动了“将标记添加到列表”部分。这样可确保仅在返回地理编码器响应后才将标记添加到列表中。我还必须使用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如this吗？如果是这样，您可以在以下行中做一些事情（请注意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，点击一个标记！：）

需要帮助反向地理编码将消息附加到GLatLng坐标

2 个答案: