Question

我不清楚为什么Google会向您展示如何使用Google商家信息创建搜索框，但之后不会添加点击处理程序来为您提供包含相关信息的信息框。我无法让它发挥作用。有没有人对如何做到这一点有任何建议？在网上某处有一篇我还没见过的文章吗？

Answer 1

我使用了来自documentation的示例代码，并添加了一些内容来显示每个地方的信息窗口。请检查以下示例：

代码段

＆＃13;

function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -33.8688, lng: 151.2195},
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

   // Bias the SearchBox results towards current map's viewport.
   map.addListener('bounds_changed', function() {
       searchBox.setBounds(map.getBounds());
   });
  
   var infowindow = new google.maps.InfoWindow({
   });

   var markers = [];
   // [START region_getplaces]
   // Listen for the event fired when the user selects a prediction and retrieve
   // more details for that place.
   searchBox.addListener('places_changed', function() {
       var places = searchBox.getPlaces();

       if (places.length == 0) {
           return;
       }

       // Clear out the old markers.
       markers.forEach(function(marker) {
          marker.setMap(null);
       });
       markers = [];

       // For each place, get the icon, name and location.
       var bounds = new google.maps.LatLngBounds();
       places.forEach(function(place) {
           var icon = {
               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: icon,
               title: place.name,
               position: place.geometry.location
           });

           markers.push(marker);
  
           //Add info window click events here
           (function(marker, place){
               marker.addListener('click', function() {
                   var content = "<h1>"+place.name+"</h1>";
                   content += "<p>"+place.formatted_address+"</p>";
                   if (place.formatted_phone_number) {
                       content += "<p>Phone:&nbsp;"+place.formatted_phone_number+"</p>";
                   }  
                   infowindow.setContent(content);            
                   infowindow.open(map, marker);
               });
           })(marker, place);

           if (place.geometry.viewport) {
               // Only geocodes have viewport.
               bounds.union(place.geometry.viewport);
           } else {
               bounds.extend(place.geometry.location);
           }
       });
       map.fitBounds(bounds);
   });
   // [END region_getplaces]
}

＆＃13;

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
.controls {
  margin-top: 10px;
  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: 300px;
}

#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;
}

＆＃13;

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&v=3&libraries=places&callback=initAutocomplete"></script>

＆＃13;

你也可以在jsbin上看到这个例子：http://jsbin.com/gozabuc/edit?html,output

希望它有所帮助！

将信息框添加到Google地方信息标记

1 个答案: