javascript - 在 Google map 上获取所选机构的详细信息

Question

有很多关于此的问题和可用的文档，但似乎我找不到我要解决的用例的解决方案。

我想做什么:

• 使用带有搜索框的 Google map ，以便用户可以搜索位置(更具体的兴趣点所在的城市)。这是我能做的。
• 当用户搜索位置时，没有放置标记， map 只会放大该位置
• 用户可以点击 Places Library 中的一家企业
• 当那个地方被点击时，我想得到这个地方的详细信息

所以它基本上是在扩展the places autocomplete提到最后一个项目符号

-或-

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

我希望在点击时从该机构获得的详细信息(可通过 geocomplete 直接获得)是:

• 姓名
• 格式化地址(参见地理完整表单示例)
• Google map 的 URL(例如:https://maps.google.com/?cid=16742034748962857918)
• 纬度
• 经度
• 网站

更新

使用 geocomplete 库，您可以绑定(bind)一个点击事件，如下所示:

$("#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 Click Event”即可。它监听 POI 图标上的点击事件，然后使用 placeId 来实现您想要实现的任何目标。在您的情况下，您想获取这些:名称、格式化地址、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”的原型(prototype)“getPlaceInformation”。您需要使用 Google Maps Javascript API Place Details 在本节中。在 Google Maps Javascript API Place Details getDetails 方法中，您将使用您提供的 placeid 作为来自您之前创建的函数 (getPlaceInformation) 的参数。 getDetails 方法需要 2 个参数:地点和状态。此方法从您提供的 placeid 获取所有详细信息。一旦您获得status === '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>

希望对您有所帮助，祝您编码愉快!