Question

我把这个脚本（注意：我正在使用jQuery 1.11.2 ）放在一起，从PHP操作中获取lat长坐标（用于其他内容）并显示一个定制的地图标记和infowindow，其中包含用于格式化显示信息的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的链接，以便您可以看到它的实际效果：Script on CodePen

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

Answer 1

这是我将如何做到的：

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!
});

Answer 2

使用节点而不是字符串作为content，然后您可以将地理编码结果放在内容中，无论infoWindow是否已经可见，或者结果是否可用（它没有＆＃39} ;即使InfoWindow已经初始化，一个节点总是＆＃34;直播＆＃34;）。

简单演示：

＆＃13;

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);

＆＃13;

      html,
      body,
      #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

＆＃13;

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

2 个答案: