Question

按照google开发者网站上的示例，我希望在搜索结果中点击一个信息窗口（而不仅仅是悬停时的图块）有一些类似的问题，但我找不到能够做到这一点的答案。

有人可以告诉我如何解决它吗？

<!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
          html, body, #map-canvas {
            height: 100%;
            margin: 0;
            padding: 0;
          }

          .controls {
            margin-top: 16px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
          }

          #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            margin-left: 12px;
            padding: 0 11px 0 13px;
            text-overflow: ellipsis;
            width: 400px;
          }

          #pac-input:focus {
            border-color: #4d90fe;
          }

          .pac-container {
            font-family: Roboto;
          }

          #type-selector {
            color: #fff;
            background-color: #4d90fe;
            padding: 5px 11px 0px 11px;
          }

          #type-selector label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
          }

        </style>
        <title>Places search box</title>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
        <script>
    // This example adds a search box to a map, using the Google Place Autocomplete
    // feature. People can enter geographical searches. The search box will return a
    // pick list containing a mix of places and predicted search terms.

    function initialize() {

      var markers = [];
      var map = new google.maps.Map(document.getElementById('map-canvas'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var defaultBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(-33.8902, 151.1759),
          new google.maps.LatLng(-33.8474, 151.2631));
      map.fitBounds(defaultBounds);

      // Create the search box and link it to the UI element.
      var input = /** @type {HTMLInputElement} */(
          document.getElementById('pac-input'));
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

      var searchBox = new google.maps.places.SearchBox(
        /** @type {HTMLInputElement} */(input));

      // [START region_getplaces]
      // Listen for the event fired when the user selects an item from the
      // pick list. Retrieve the matching places for that item.
      google.maps.event.addListener(searchBox, 'places_changed', function() {
        var places = searchBox.getPlaces();

        if (places.length == 0) {
          return;
        }
        for (var i = 0, marker; marker = markers[i]; i++) {
          marker.setMap(null);
        }

        // For each place, get the icon, place name, and location.
        markers = [];
        var bounds = new google.maps.LatLngBounds();
        for (var i = 0, place; place = places[i]; i++) {
          var image = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
          };

          // Create a marker for each place.
          var marker = new google.maps.Marker({
            map: map,
            icon: image,
            title: place.name,
            position: place.geometry.location
          });

          markers.push(marker);

          bounds.extend(place.geometry.location);
        }

        map.fitBounds(bounds);
      });
      // [END region_getplaces]

      // Bias the SearchBox results towards places that are within the bounds of the
      // current map's viewport.
      google.maps.event.addListener(map, 'bounds_changed', function() {
        var bounds = map.getBounds();
        searchBox.setBounds(bounds);
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

        </script>
        <style>
          #target {
            width: 345px;
          }
        </style>
      </head>
      <body>
        <input id="pac-input" class="controls" type="text" placeholder="Search Box">
        <div id="map-canvas"></div>
      </body>
    </html>

感谢。

出于某种原因，我无法解决这个问题（可能是域名权限问题）而我无法上传图片，因为我是新来的

Answer 1

尝试将其放入引用外部资源中的https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places的jsfiddle。

从搜索框中选择地址/地点后，标记和infoWindow会在infoWindow打开并填充的情况下进行渲染。

<div id="map_canvas"></div>
<div id="locationField">
    <input id="autocomplete" name="autocomplete" type="text" placeholder="Location Search" onFocus="geolocate()" />
</div>

function initialize（）{

var placeSearch;

var mapOptions = {
    center: new google.maps.LatLng(41.877461, -87.638085),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    disableDefaultUI: true,
    streetViewControl: false,
    panControl: false
};

var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);

var input = /** @type {HTMLInputElement} */
(
document.getElementById('autocomplete'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);

var infowindow = new google.maps.InfoWindow();

var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
});
google.maps.event.addListener(marker, 'click', function () {
    infowindow.open(map, marker);
});

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    infowindow.close();
    marker.setVisible(false);

    var place = autocomplete.getPlace();

    if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(12); // Why 17? Because it looks good.
    }
    marker.setIcon( /** @type {google.maps.Icon} */ ({
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(25, 34),
        scaledSize: new google.maps.Size(50, 50)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);


    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
        'Place ID: ' + place.place_id + '<br>' + place.formatted_address);
    infowindow.open(map, marker);
});

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = new google.maps.LatLng(
            position.coords.latitude, position.coords.longitude);

            autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
        });
    }
}

} 初始化（）;

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#autocomplete {
    height: 60px;
    width: 100%;
    border: 2px solid #fff;
    color: #1c1c1c;
    font-size: 15px;
    text-align: center;
    background-color: #fff;
    font-family: Roboto;
    font-weight: 300;
    text-overflow: ellipsis;
}
#autocomplete:focus {
    border-color: #4d90fe;
}

谷歌放置Api，自动完成和infowindow

1 个答案: