如何使用 Google Maps API 在标记上设置地址

Question

如何在下面的代码中设置地址（带换行符）？ 我的代码的相关部分——应该进行更正的地方——可以在 // display window on the Map 注释行之后找到。
目前格式化是用普通的divs 完成的，但我希望它使用谷歌地图信息窗口的标准样式。

function initialize() {
    var mapOptions = {
        zoom: zoom,
        center: latglong,
        scrollwheel: false,
        streetViewControl: false,
        mapTypeControl: false
    };


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

    var infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);

    service.getDetails({
        placeId: 'my id'
    }, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            // display window on the Map
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent('<div><b>' + place.name + '</b><br>' +
                    'Street <br> Postalcode City <br>Country <br><div class="view-link"> <a target="_blank" href="https://www.google.de//maps/place/adsfasdfadsfadf"> <span>In Google Maps ansehen</span> </a> </div>')
                infowindow.open(map, this);
            });                                
        }
    });
}

现在输出如下所示：

Answer 1

您可以使用this example in the Google Maps Javascript API v3 documentation 中的“地点地址”解析

var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function fillInAddress(place) {
  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

相关 HTML（隐藏）：

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField">
      <input class="field" id="street_number" disabled="true" />
    </td>
    <td class="wideField" colspan="2">
      <input class="field" id="route" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">City</td>
    <!-- Note: Selection of address components in this example is typical.
             You may need to adjust it for the locations relevant to your app. See
             https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
        -->
    <td class="wideField" colspan="3">
      <input class="field" id="locality" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField">
      <input class="field" id="administrative_area_level_1" disabled="true" />
    </td>
    <td class="label">Zip code</td>
    <td class="wideField">
      <input class="field" id="postal_code" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3">
      <input class="field" id="country" disabled="true" />
    </td>
  </tr>
</table>

proof of concept fiddle

代码 sn-p：

var latglong = new google.maps.LatLng(37.4419, -122.1419);
var zoom = 13;

function initialize() {
  var mapOptions = {
    zoom: zoom,
    center: latglong,
    scrollwheel: false,
    streetViewControl: false,
    mapTypeControl: false
  };


  map = new google.maps.Map(document.getElementById('oh-event-map-canvas'), mapOptions);
  google.maps.event.addListener(map, 'click', function(evt) {
    console.log(evt);
  })

  var infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);

  service.getDetails({
    placeId: 'ChIJHz4XFiW7j4ARCIp120CAcFE'
  }, function(place, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      fillInAddress(place);
      var marker = new google.maps.Marker({
        map: map,
        position: place.geometry.location
      });
      // display window on the Map
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent('<div><b>' + place.name + '</b><br>' +
          document.getElementById('street_number').value + ' ' + document.getElementById('route').value + '<br>' + document.getElementById('locality').value + ' ' + document.getElementById('postal_code').value + ' ' + document.getElementById('administrative_area_level_1').value + '<br>' +
          document.getElementById('country').value + '<br><div class="view-link"> <a target="_blank" href="https://www.google.de//maps/place/adsfasdfadsfadf"> <span>In Google Maps ansehen</span> </a> </div>')
        infowindow.open(map, this);
      });
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function fillInAddress(place) {
  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

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

#address {
  display: none;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="oh-event-map-canvas"></div>
<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField">
      <input class="field" id="street_number" disabled="true" />
    </td>
    <td class="wideField" colspan="2">
      <input class="field" id="route" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">City</td>
    <!-- Note: Selection of address components in this example is typical.
             You may need to adjust it for the locations relevant to your app. See
             https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
        -->
    <td class="wideField" colspan="3">
      <input class="field" id="locality" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField">
      <input class="field" id="administrative_area_level_1" disabled="true" />
    </td>
    <td class="label">Zip code</td>
    <td class="wideField">
      <input class="field" id="postal_code" disabled="true" />
    </td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3">
      <input class="field" id="country" disabled="true" />
    </td>
  </tr>
</table>