在 Google 地图上获取所选机构的详细信息

Question

关于此问题有很多问题，并且有可用的文档，但是似乎我无法找到要解决的用例的解决方案。

我想做什么：

• 有一个带有搜索框的谷歌地图，这样用户就可以搜索一个位置（一个更具体的兴趣点的城市）。 这是我可以做的事情。
• 用户搜索位置时，不放置标记，地图仅放大该位置
• 用户可以从地点库中点击一个机构
• 点击那个地方后，我想从这个地方获取详细信息

所以它基本上是用提到的最后一个项目符号扩展自动完成的地方

-或者-

使用geocomplete 库，更具体地说是表单示例，因为它已经提供了下面列出的所有需要​​的详细信息。 我缺少的是如何不在搜索中放置标记，以及如何仅在用户单击时从机构获取详细信息。

单击时我想从该机构获得的详细信息（可直接通过 geocomplete 获得）是：

• 姓名
• 格式化地址（请参阅地理完成表单示例）
• Google 地图的 URL（例如： https : //maps.google.com/?cid=16742034748962857918 ）
• 纬度
• 经度
• 网站

更新

使用 geocomplete 库，您可以绑定点击事件，如下所示：

$("#geocomplete_input_field").bind("geocode:click", function(event, latLng){
  $("input[name=lat]").val(latLng.lat());
  $("input[name=lng]").val(latLng.lng());
});

这样我们就得到了纬度和经度。 但是您是否也可以像表单示例中那样获取 formatted_address、name 和 url？

Answer 1

好吧，您不需要任何外部库来完成此操作。 由于一切都已完成（代码），您只需添加一个“POI 点击事件”即可。 它侦听 POI 图标上的点击事件，然后将 placeId 用于您想要实现的任何目标。 在您的情况下，您想要获取这些信息：名称、formatted_addres、url、lat、lng 和网站。

在我将为您提供的示例中，我刚刚创建了一个构造函数“ClickEventHandler”。 您可以查看POI Click以获取示例和文档。

  var ClickEventHandler = function(map, origin) {
    this.origin = origin;
    this.map = map;
    this.placesService = new google.maps.places.PlacesService(map);
    this.infowindow = new google.maps.InfoWindow();
    // Listen for clicks on the map.
    this.map.addListener('click', this.handleClick.bind(this));
  }; 

然后，在 init() 函数中创建一个新实例并提供参数：map 和 origin。

var clickHandler = new ClickEventHandler(map, {lat: -33.8688, lng: 151.2195});

在“ClickEventHandler”对象中，创建一个接受参数“placeid”的原型“getPlaceInformation”。 您需要在本节中使用Google Maps Javascript API Place Details 。 在 Google Maps Javascript API Place Details getDetails方法中，您将使用您提供的 placeid 作为来自您创建的前一个函数 (getPlaceInformation) 的参数。 getDetails方法需要 2 个参数：位置和状态。 此方法从您提供的 placeid 中获取所有详细信息。 一旦您获得状态 === 'OK' ，它将返回您期望的数据。

ClickEventHandler.prototype.getPlaceInformation = function(placeId) {  
   this.placesService.getDetails({placeId: placeId}, function(place, status) {
      if (status === 'OK') {         
      }
   });
};  

下面的工作示例（信息窗口中的详细信息和 POI 提供的输入元素值）：

 // 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. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> function initAutocomplete() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: -33.8688, lng: 151.2195}, zoom: 13, 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()); }); // 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; } // For each place, get the icon, name and location. var bounds = new google.maps.LatLngBounds(); places.forEach(function(place) { if (!place.geometry) { console.log("Returned place contains no geometry"); return; } if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); }); var clickHandler = new ClickEventHandler(map, {lat: -33.8688, lng: 151.2195}); } var ClickEventHandler = function(map, origin) { this.origin = origin; this.map = map; this.placesService = new google.maps.places.PlacesService(map); this.infowindow = new google.maps.InfoWindow(); // Listen for clicks on the map. this.map.addListener('click', this.handleClick.bind(this)); }; ClickEventHandler.prototype.getPlaceInformation = function(placeId) { var me = this; this.placesService.getDetails({placeId: placeId}, function(place, status) { me.infowindow.close(); if (status === 'OK') { var inputNames = [ 'name', 'formatted_address', 'url', 'website' ]; for ( var val in inputNames ) { document.getElementById(inputNames[val]).value = place[inputNames[val]]; } document.getElementById('lat').value = place.geometry.location.lat(); document.getElementById('lng').value = place.geometry.location.lng(); var template = '<div id="infoContent">'; template += '<ul>'; template += '<li><span>Name: </span>'+place.name+'</li>'; template += '<li><span>Formatted address: </span>'+place.name+'</li>'; template += '<li><span>Google Maps URL: </span><a href="'+place.url+'" target="_blank">'+place.url+'</a></li>'; template += '<li><span>Latitude: </span>'+place.geometry.location.lat()+'</li>'; template += '<li><span>Longitude: </span>'+place.geometry.location.lng()+'</li>'; template += '<li><span>Website: </span><a href="'+place.website+'" target="_blank">'+place.website+'</a></li>'; template += '</ul>'; me.infowindow.setContent(template); me.infowindow.setPosition(place.geometry.location); me.infowindow.open(me.map); } }); }; ClickEventHandler.prototype.handleClick = function(event) { //console.log('You clicked on: ' + event.latLng); // If the event has a placeId, use it. if (event.placeId) { //console.log('You clicked on place:' + event.placeId); // Calling e.stop() on the event prevents the default info window from // showing. // If you call stop here when there is no placeId you will prevent some // other map click event handlers from receiving the event. event.stop(); this.getPlaceInformation(event.placeId); } };

 #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #description { font-family: Roboto; font-size: 15px; font-weight: 300; } .pac-card { margin: 10px 10px 0 0; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); background-color: #fff; font-family: Roboto; } #pac-container { padding-bottom: 12px; margin-right: 12px; } .pac-controls { display: inline-block; padding: 5px 11px; } .pac-controls label { font-family: Roboto; font-size: 13px; font-weight: 300; } #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; } #title { color: #fff; background-color: #4d90fe; font-size: 25px; font-weight: 500; padding: 6px 12px; } #target { width: 345px; } #infoContent { width:100%; float:left; overflow:hidden; display:block; } #infoContent > ul { width:100%; float:left; overflow:hidden; display:block; } #infoContent > ul > li { width:100%; float:left; overflow:hidden; clear:both; font-size:12px; } #infoContent > ul > li span { font-weight:bold; } #infoContent > ul > li a { text-decoration:none; } #myForm { width:100%; float:left; overflow:hidden; display:block; box-sizing:border-box; padding: 10xp; } #myForm fieldset { display:block; clear:both; float:left; border:none; } #myForm fieldset label { width:100%; float:left; overflow:hidden; display:block; clear:both; line-height:24px; } #myForm fieldset input { width: 100%; float:left; overflow:hidden display:block; clear:both; line-height: 24px; padding: 0 5px; }

 <input id="pac-input" class="controls" type="text" placeholder="Search Box"> <div id="map"></div> <form id="myForm"> <fieldset> <label>Name:</label> <input type="text" name="name" id="name" /> </fieldset> <fieldset> <label>Formatted address:</label> <input type="text" name="formatted_address" id="formatted_address" /> </fieldset> <fieldset> <label>URL to Google Maps:</label> <input type="text" name="url" id="url" /> </fieldset> <fieldset> <label>Latitude:</label> <input type="text" name="lat" id="lat" /> </fieldset> <fieldset> <label>Longitude:</label> <input type="text" name="lng" id="lng" /> </fieldset> <fieldset> <label>Website:</label> <input type="text" name="website" id="website" /> </fieldset> </form> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&libraries=places&callback=initAutocomplete" async defer></script>

希望它有帮助和快乐编码！