执行谷歌地图反向地理编码，并将结果作为HTML内容的一部分显示在信息窗口中

Doing a Google Maps reverse geocode and displaying the result as part as HTML content inside an infowindow

本文关键字：一部分 HTML 显示 窗口 信息窗 信息 谷歌地图 编码 结果 执行      更新时间：2023-09-26

我已经编写了这个脚本（注意：我使用的是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>

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

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

编辑：我已经调整了这里提供的脚本，以符合关于它清晰可读以及它实际上应该工作的规则。我还包括一个指向CodePen的链接，这样你就可以看到它的动作：CodePen 上的脚本

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

使用一个节点而不是字符串作为content，然后您可以将地理编码结果放置在内容中，无论infoWindow是否已经可见或结果何时可用（即使infoWindow已经初始化也无关紧要，节点总是"活动"的）。

简单演示：

function initialize() {
  var geocoder = new google.maps.Geocoder(),
    latlng = new google.maps.LatLng(52.5498783, 13.42520);
  map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 18,
      center: latlng
    }),
    marker = new google.maps.Marker({
      map: map,
      position: latlng
    }),
    content = document.createElement('div'),
    infoWin = new google.maps.InfoWindow({
      content: content
    });
  content.innerHTML = '<address>the address should appear here</address>';
  google.maps.event.addListener(marker, 'click', function() {
    infoWin.open(map, this);
  });
  geocoder.geocode({
    location: latlng
  }, function(r, s) {
    if (s === google.maps.GeocoderStatus.OK) {
      content.getElementsByTagName('address')[0].textContent = r[0].formatted_address;
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
      html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

以下是我的操作方法：

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!
});
相关文章：