需要帮助反向地理编码将消息附加到GLatLng坐标 [英] Need help Reverse Geocoding to append message to GLatLng coordinate
问题描述
我的代码： http://jsbin.com/epuxu
在SO的帮助下，我设法将地址编码并将其相应的针脚放在地图上。 问题是我无法选择坐标以便在地图上附加#message div，因为我没有坐标了。
With help from SO, I managed to get addresses geocoded and their according pins placed on the map. The problem is that I can't select the coordinates in order to append a #message div to it on the map because I don't have the coordinates anymore.
我怀疑我在这一部分做错了什么：
I suspect I'm doing something wrong in this section:
/* 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上被注释掉了）：
it works when I use the original coordinate code (this is commented out on 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;
}
但是我需要帮助它才能使用当前代码：
but I need help getting it to work with this current code:
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，所以任何洞察力我做错了什么会非常有帮助。谢谢=]
I'm kinda new to utilizing the google maps api, so any insight on what I'm doing wrong would be very helpful. Thanks =]
推荐答案
我担心您的代码出现了一些问题：P
I'm afraid there were quite a few things wrong with your code :P
我不得不做一些整形手术，但结果如下： http：// jsbin。 com / atofe
I had to do a bit of plastic surgery but here's the result: http://jsbin.com/atofe
以下是我所做更改的说明。如果您需要帮助，请与我联系。
The following is a description of the changes I made. Let me know if you need help understanding anything.
<script type="text/javascript">
document.write(marker);
</script>
由于导致错误，我不得不对此进行评论。我猜你错误地将它留在了那里。
I had to comment this out since it was causing an error. I'm guessing you left it in there by mistake.
<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"]
];
因为我们使用的是地址而不是坐标，所以你不需要（事实上你不应该'因为它只会使事情复杂化）将每个字符串封装在一个数组中。我还将其重命名为地址，以使其更清晰，并防止与实际标记发生冲突（稍后会详细介绍）。
Since we are using addresses instead of coordinates, you don't need to (in fact you shouldn't because it only complicates things) encapsulate each string in an array. I also renamed it to addresses to make it more clear and prevent conflicts with the actual markers (more on that later).
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);
});
});
这是我必须做出最大改变的地方。
你在这里犯了几个重大错误。
This is where I had to make the most changes. You made a couple of significant mistakes here.
首先，你重复使用变量 marker 何时应该使用新名称。在这个过程中，你编写了地址字符串数组并误解了存储内容的位置（这就是为什么我将地址字符串数组重命名为地址）。
First, you re-used the variable markers when you should have used a new name. In the process you wrote over the array of address strings and misunderstood where things were stored (This is why I renamed the array of address strings to addresses).
其次，在地理编码器实际返回其响应之前，您尝试将标记添加到列表中。我认为您没有意识到 getLatLng 是一个异步函数，因此只有在地理编码器返回其响应后才会执行回调函数。由于你没有等待响应，它呈现添加标记到列表部分没用，因为还没有检索到标记。
Second, you tried to add the markers to the list before the geocoder actually returned its response. I think you didn't realize that getLatLng is an asynchronous function, so it executes the callback function only after the geocoder returns its response. Since you didn't wait for the response, it rendered the "Add markers to list" section useless as the markers had not been retrieved yet.
所以，修复这些问题我在新的 handleGeocoderResponse 函数中移动了将标记添加到列表部分。这样可确保仅在返回地理编码器响应后才将标记添加到列表中。我还必须使用双关闭，因为我们是使用循环和异步函数。
So, to fix these issues I moved the "Add markers to list" section inside the new handleGeocoderResponse function. This ensures the markers are added to the list only after the geocoder response is returned. I also had to use a double-closure since we are using a loop along with an asynchronous function.
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)
);
}
}
这篇关于需要帮助反向地理编码将消息附加到GLatLng坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
