Javascript 执行Google Maps反向地理代码，并将结果作为HTML内容的一部分显示在信息窗口中

我编写了这个脚本（注意：我使用的是jQuery 1.11.2），它从PHP操作（用于其他操作）中获取lat-long坐标，并显示一个带有自定义标记的地图和信息窗口，其中包含用于格式化显示信息的HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<script type="text/javascript">
    var maplat = 41.36058;
    var maplong = 2.19234;

    function initialize() { 
        // Create a Google coordinate object for where to center the map
        var latlng = new google.maps.LatLng( maplat, maplong ); // Coordinates    

        var mapOptions = {
            center: latlng,
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            streetViewControl: false,
            zoomControl: false,
            mapTypeControl: false,
            disableDoubleClickZoom: true
        };

        map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

        // CREATE AN INFOWINDOW FOR THE MARKER
        var content = 'This will show up inside the infowindow and it is here where I would like to show the converted lat/long coordinates into the actual, human-readable City/State/Country'
        ;  // HTML text to display in the InfoWindow

        var infowindow = new google.maps.InfoWindow({
            content: content,maxWidth: 250
        });

        var marker = new google.maps.Marker( { 
            position: latlng,     
            map: map,
            title: "A SHORT BUT BORING TITLE",
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });

        infowindow.open(map,marker);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

var maplat=41.36058；
var maplong=2.19234；
函数初始化（）{
//为地图的居中位置创建Google坐标对象
var latlng=new google.maps.latlng（maplat，maplong）；//坐标
变量映射选项={
中心：拉特林，
缩放：3，
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误，
街景控制：错误，
动物控制：错误，
mapTypeControl:false，
禁用双击缩放：真
};
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
//为标记创建一个信息窗口
var content='这将显示在信息窗口中，我想在这里将转换后的纬度/经度坐标显示为实际的、人类可读的城市/州/国家'
；//要在信息窗口中显示的HTML文本
var infowindow=new google.maps.infowindow({
内容：内容，最大宽度：250
});
var marker=new google.maps.marker（{
位置：latlng，
地图：地图，
标题：“一个简短但乏味的标题”，
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
信息窗口。打开（地图、标记）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

我试图实现的是对latlng变量中存储的坐标进行反向地理编码，以“城市、州、国家”格式返回结果，并将其插入“内容”变量中存储的informarker的HTML中

我尝试了多种方法，但都没有成功。请注意，为了清晰起见，我特意省略了我试图使用的反向地理编码脚本

编辑：我已经调整了这里显示的脚本，以符合关于它清晰易读以及它实际应该工作的规则。我还提供了一个指向代码笔的链接，以便您可以看到它的运行：

---

关于包含反向地理编码的脚本，我所做的是一场灾难，只会破坏页面并产生“未定义值”错误。我想通过示例学习正确的方法，这就是优秀的StackOverflow社区的由来。再次感谢您对帮助我的兴趣。

以下是我的做法：

function reverseGeocoder(lat, lng, callback) {
    var geocoder = new google.maps.Geocoder();
    var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
    geocoder.geocode({"latLng" : point }, function(data, status) {
        if (status == google.maps.GeocoderStatus.OK && data[0]) {
            callback(null, data[0].formatted_address);
        } else {
            console.log("Error: " + status);
            callback(status, null);
        }
    });
};

基本上你会调用如下函数：

reverseGeocoder(lat, lng, function(err, result){
    // Do whatever has to be done with result!
    // EDIT: For example you can pass the result to your initialize() function like so:
    initialize(result); // And then inside your initialize function process the result!
});

---

使用节点而不是字符串作为

内容

，然后您可以将地理编码结果放在内容中，无论infoWindow是否已可见或结果何时可用（即使infoWindow已初始化，节点始终处于“活动”状态也无所谓）

简单演示：

函数初始化（）{
var geocoder=new google.maps.geocoder（），
latlng=新的google.maps.latlng（52.5498783,13.42520）；
map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：18，
中心：拉丁
}),
marker=新的google.maps.marker({
地图：地图，
职位：latlng
}),
content=document.createElement（'div'），
infoWin=新建google.maps.InfoWindow({
内容：内容
});
content.innerHTML='地址应显示在此处'；
google.maps.event.addListener（标记'click'，函数（）{
打开（地图，这个）；
});
地理编码({
地点：拉丁美洲
}，函数（r，s）{
如果（s==google.maps.GeocoderStatus.OK）{
content.getElementsByTagName（'address'）[0]。textContent=r[0]。格式化的\u地址；
}否则{
window.alert（'地理编码器由于：'+状态而失败）；
}
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体，
#地图画布{
身高：100%；
边际：0px；
填充：0px
}

您能详细说明它是如何工作的吗？发生了什么？你漏掉了不起作用的代码？您是否意识到地理编码器（和反向地理编码器）是异步的？只是为了确保，当您尝试打印
maplat
和
maplong
以控制台时，您会得到什么？我想指出的是，你是否正确地进行了异步调用？请发表一篇文章来说明这个问题。@JustinY；我存储的值返回为未定义。谢谢Hamed。但是，我在控制台上的“参数列表”后的CodePen中得到了一个“意外标记”。@AdminWC再次检查，我没有在第二个代码块中键入
回调
，而不是
函数
。我可以确认错误已经消失。但是，我不得不承认，我在使用我成功地在一个警报框中看到了正确的反向地理代码信息，但除此之外，我不知道如何将其置于反向代码“领域”之外“/功能并将其放置在我真正需要的位置。有什么指导或智慧的话吗？@AdminWC请看我的编辑-javascript是一种异步语言，不同于php或其他任何语言。这意味着指令在单个线程上一个接一个地运行，而不必等待后者！我实现了您的编辑，但仍然无法将该死的反向地理编码文本（实际地址）显示为简单文本。初始化（结果）；导致地图刷新两次，并尝试使用其中一个“结果”作为在infowindow中以文本形式显示地址的方法已被证明是徒劳的。我担心这将不起作用，因为我们正在使用所有自定义HTML