如何在信息窗口中显示我的地理编码地址？谷歌地图 API

Posted 2023-02-23

【中文标题】如何在信息窗口中显示我的地理编码地址？谷歌地图 API

【英文标题】：How can I display the address of my geocode in an info window? Google maps API

【发布时间】：2012-01-11 01:37:51

【问题描述】：

我正在使用地理定位来通过查找经度和纬度并将结果返回到我的页面以在我的数据库中使用来获取我的谷歌地图 API 上的地点地址。

我无法在地图的信息窗口中显示这些结果。

如何使用下面的代码在我的信息窗口中包含地址。它目前使用以下代码显示 long 和 lat：

infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
infowindow.open(map, marker);

函数 geocodePosition 查找坐标的地址并将其附加到我的表单中的 html 输入中。

如何调整它以更新信息窗口。我现在尝试了很多方法，但都没有成功。有什么想法吗？？

<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) 
  geocoder.geocode(
    latLng: pos
  , function(responses) 
    if (responses && responses.length > 0) 
      updateMarkerAddress(responses[0].formatted_address);

     else 
      updateMarkerAddress('Cannot determine address at this location.');
    
  );


function updateMarkerStatus(str) 
  document.getElementById('markerStatus').value = str;


function updateMarkerPosition(latLng) 
  document.getElementById('info').value = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');


function updateMarkerAddress(str) 
  document.getElementById('address').value = str;



function initialize()  

  var latLng = new google.maps.LatLng(-34.397, 150.644);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), 
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  );


  var marker = new google.maps.Marker(
    position: latLng,
    title: 'Property location marker',
    map: map,
    draggable: true
  );

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        var infowindow = new google.maps.InfoWindow();

        autocomplete.bindTo('bounds', map);

google.maps.event.addListener(autocomplete, 'place_changed', function() 
  var place = autocomplete.getPlace();
  if (place.geometry.viewport) 
    map.fitBounds(place.geometry.viewport);
   else 
    map.setCenter(place.geometry.location);
    map.setZoom(17);
  
  var image = new google.maps.MarkerImage(
      place.icon, new google.maps.Size(71, 71),
      new google.maps.Point(0, 0), new google.maps.Point(17, 34),
      new google.maps.Size(35, 35));
  marker.setIcon(image);
  marker.setPosition(place.geometry.location);

    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);

);

  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);

    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);

  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() 
    updateMarkerAddress('Dragging...');
  );

  google.maps.event.addListener(marker, 'drag', function() 
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  );

  google.maps.event.addListener(marker, 'dragend', function() 
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());

        //Show property address in window
    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);
  );


// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>

【参考方案1】：

marker.getPosition() 不会提供街道地址。鉴于您当前的代码，最好的选择是移动：

infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>');

到您的 geocodePosition() 函数，然后将 infowindow 对象作为第二个参数传递给该函数。

因此，在您的 initialize() 函数中，您可以通过包含第二个参数来修改对 geocodePosition 的调用：

function initialize() 

...

  geocodePosition(marker.getPosition(), infowindow);

然后在您的geocodePosition() 函数中，您将接受第二个参数，并使用responses[0].formatted_address value 更新它。我添加了变量，以便更轻松地传递地址和消息的值。

function geocodePosition(pos, infowindow) 
  geocoder.geocode(
    latLng: pos
  , function(responses) 
    if (responses && responses.length > 0) 
      var address = responses[0].formatted_address;      
      updateMarkerAddress(address);
      infowindow.setContent('<div><strong>' + address + '</strong><br>');

     else 
      var msg = 'Cannot determine address at this location.';      
      updateMarkerAddress(msg);
      infowindow.setContent('<div><strong>' + msg + '</strong><br>');
    
  );
 

【参考方案2】：

您可能想使用 Google 地图 api - http://code.google.com/apis/maps/documentation/geocoding/#GeocodingRequests

还有其他 API 可以为您提供相同的功能 - 但其中大部分都需要付费，而且通过 Google，您可以免费获得很多“里程”。