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

Question

如何在下面的代码中设置地址（带换行符）？ 我的代码的相关部分（应进行校正）可以// display window on the Map注释行// display window on the Map之后找到。
目前，格式化是使用常规div的，但我希望使用Google Maps Info Window的标准样式进行格式化。

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

您可以使用Google Maps Javascript API v3文档中此示例中的“地方地址”解析

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>

概念证明

代码段：

 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>