Details zur gewählten Einrichtung in Google Maps abrufen

Question

Es gibt einige Fragen zu dieser und der verfügbaren Dokumentation, aber es scheint, dass ich keine Lösung für den Anwendungsfall finden kann, den ich zu lösen versuche.

Was Ich mag würde tun:

• Haben Sie eine Google Map mit einem Suchfeld, so kann ein Benutzer für einen Standort (eine Stadt von spezifischeren einem Point of Interest) suchen. Das kann ich tun.
• Wenn ein Nutzer nach einem Ort, keine Markierung gesetzt wird, zoomt die Karte nur auf dem Standort in
• Benutzer auf einer Niederlassung von den Places Library
• klicken können, wenn dieser Ort angeklickt wird, würde ich von diesem Ort wie Details

Also im Grunde es erstreckt the places autocomplete mit der letzten Kugel bekommen erwähnt

-oder

mit der geocomplete library, genauer gesagt the form example, denn es gibt bereits alle erforderlichen Informationen, die unten aufgeführt sind. Die Sache, die mir fehlt, ist, wie man keine Markierung in die Suche einfügt und wie man Details aus einer Einrichtung nur dann erhält, wenn die Benutzer darauf klicken.

Die Details, die Ich mag würde von der Einrichtung erhalten, wenn darauf geklickt, die durch geocomplete direkt zur Verfügung stehen, sind:

• Namen
• Formatiert Adresse
• URL (geocomplete Form Beispiel) Google maps (wie: https://maps.google.com/?cid=16742034748962857918)
• Latitude
• Longitude
• Webseite

UPDATE

Mit der geocomplete Bibliothek Sie ein Click-Ereignis binden können, etwa so:

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

damit So erhalten wir die Breite und Länge. Aber können Sie auch die formatierte_Adresse, den Namen und die URL wie im Formularbeispiel erhalten?

Answer 1

Nun, Sie brauchen keine externe Bibliothek, um dies zu erreichen. Da alles bereits erledigt ist (Codes), müssen Sie nur noch ein "POI Click Event" hinzufügen. Er wartet auf das Klickereignis auf einem POI-Symbol und verwendet dann die placeId für alles, was Sie erreichen möchten. In Ihrem Fall wollten Sie diese: Name, formatierte_Addres, URL, Lat, Lng und Website.

In dem Beispiel, das ich Ihnen bereitstellen werde, habe ich gerade einen Konstruktor 'ClickEventHandler' erstellt. Sie können POI Click für Beispiel und Dokumentation überprüfen.

Dann erstellen Sie eine neue Instanz innerhalb Ihrer init() -Funktion und liefern die Argumente: map und Herkunft.

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

Im Objekt 'Click', einen Prototyp 'getPlaceInformation' schaffen, die ein Argument 'placeid' akzeptiert. Sie müssen Google Maps Javascript API Place Details in diesem Abschnitt verwenden. Innerhalb der Google Maps Javascript API Ort Details getDetails Methode, verwenden Sie die placeid Sie als Argument von der vorherigen Funktion (getPlaceInformation) zur Verfügung gestellt, die Sie erstellt haben. getDetails Methode benötigt 2 Argumente: Ort und Status. Diese Methode ruft alle Details aus der von Ihnen angegebenen Stelle ab. Sobald Sie die Status === "OK" erhalten, wird es zu den Daten zurückkehren, die Sie erwarten.

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

Arbeitsbeispiel unten (mit Details in Infofenster und Eingabeelemente Wert aus dem POI im Lieferumfang enthalten):

 // 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>

Hoffe, es hilft und glücklich Codierung!