需要帮助反向地理编码将消息附加到GLatLng坐标
-
03-07-2019 - |
题
我的代码: http://jsbin.com/epuxu
在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有点新意,所以任何关于我做错事的见解都会非常有帮助。谢谢=]
解决方案
我担心您的代码存在很多问题: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
函数内的部分。这样可确保仅在返回地理编码器响应后才将标记添加到列表中。我还必须使用双关闭,因为我们是使用循环和异步函数。
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]);
}
试一试,点击标记! :)