Mit Google Places-Search-Box. So initiieren Sie eine Suche durch klicken auf eine Schaltfläche?

Entweder bin ich ein idiot oder war dies eine unerhörte Aufsicht auf dem Teil der Google Maps-team.

Ich bin versucht, auslösen Orten suchen Anfrage auf einen button-Klick-Ereignis in Verbindung mit der standard-Eingabe keypress-Ereignis (was derzeit gut funktioniert). Ich habe durchkämmt, die Dokumentation im Zusammenhang mit der Google Places search box und fand kein geeignetes Lösung.

Weil aus Gründen der Vertraulichkeit ich bin mit dem Beispiel aus der demo.

function initialize() {
  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);

  var input = /** @type {HTMLInputElement} */(document.getElementById('target'));
  var searchBox = new google.maps.places.SearchBox(input);
  var markers = [];


  document.getElementById('button').addEventListener('click', function() {
    var places = searchBox.getPlaces();

    //places -> undefined

    //The assumption is that I could just call getPlaces on searchBox
    //but get nothing in 'places'
    //Beyond that it doesn't even make a call to the Google Places API

    //Currently the only way to perform the search is via pressing enter
    //which isn't terribly obvious for the user.

  }, false)


  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

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

    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)
      };

      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);
    }
  }

InformationsquelleAutor jjhenry | 2013-10-01

9

Müssen Sie zuerst ausgelöst focus auf das input-element, dann Auslöser einer keydown - Ereignis mit der code - 13 (enter-Taste).
```
var input = document.getElementById('target');

google.maps.event.trigger(input, 'focus')
google.maps.event.trigger(input, 'keydown', {
    keyCode: 13
});
```
JSFiddle demo

InformationsquelleAutor MrUpsidown
1

Es ist einfacher, als Sie denken. Mit dem gleichen Ausgangspunkt wie oben, https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Fügen Sie eine Schaltfläche, um die HTML -
```
<button id="button">click</button>
```
in initialize() fügen Sie diese zu Ende, bevor } :
```
  var button = document.getElementById('button'); 
  button.onclick = function() {
    input.value='test';
    input.focus(); 
  }
```
input ist bereits definiert. Alles, was Sie zu tun haben, zur Auslösung der Orte suchen, indem ein button ist - wirklich - zu focus die Eingabe im Feld im Zusammenhang mit der Suchbox. Sie nicht haben, um sich mit der Suchbox oder trigger "places_changed" oder irgendetwas wie das, was Sie sehen können, die anderswo als Anregungen - aber in der Tat nicht arbeiten.

Ich denke, Sie auslösen möchten, indem Sie eine Schaltfläche "aus irgendeinem Grund", wie der Suche nach einige spezifische predifined - das ist, warum ich trigger die Suche mit "test", einfach durch festlegen der input-Wert zu testen.

Aktualisiert mit arbeiten demo, basierend auf der google-Beispiel oben -> http://jsfiddle.net/7JTup/
- Dank einer Tonne! Sorry, ich bin nur sehen diese. Ich werde versuchen dies und lassen Sie wissen, sobald ich im Büro.
- Dies löst den Suchergebnissen dropdown zu füllen, mit den Anregungen, richtig? Aber gibt es eine Möglichkeit, auch simulieren das Verhalten erhalten Sie, wenn Sie schlagen die "Enter"? Wie die Ergebnisse zeigen auf der Karte für die Eingabe in das Eingabefeld, wenn Sie die Taste drücken?
- nicht ganz verstehen? Die google places-Eingang reagiert auf <enter> standardmäßig. Wenn Sie möchten, füllen Sie aus einer anderen Quelle durch drücken der EINGABETASTE, können Sie leicht ersetzen Sie die Taste mit einem Eingang und ersetzen onclick mit ein onkeyup-event
- froh zu helfen. Sie konnte upvote oder akzeptieren Sie die Antwort 🙂
- Ich bin nicht daran interessiert, Auffüllen der Eingabe, aber in der Suche (ich denke, das ist auch das, was der OP gefragt). Die Idee wäre, ein input und ein button daneben und, wenn auf die Schaltfläche geklickt wird, wird das gleiche Ergebnis erhalten wie beim drücken der EINGABETASTE (d.h. führen Sie eine Suche durch und zeigt die Ergebnisse auf der Karte). Zum Beispiel, was Sie sehen können auf maps.google.com: einen Eingabe-und einen Suche-button und die Suche wird durchgeführt, wenn man Enter oder bei Klick auf die Schaltfläche.
- für mich input.focus() funktioniert nicht
- so? Einrichten einer Geige oder erstellen eine neue Frage. Die Antwort ist nicht accpeted, nicht auch von Ihnen positiv bewertet werden, so dass ich nicht denke, Sie sollten mir die Schuld.
InformationsquelleAutor davidkonrad

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.