1

Ich versuche, eine App mit Ionic + Cordova zu bauen. Ich möchte eine Karte in meiner App anzeigen. Ich verwende Cordova Google Maps Plugin dafür und ich bin in der Lage, die Karte erfolgreich zu rendern. Jetzt möchte ich ein Suchfeld auf der Karte platzieren. Die Suche sollte Ortsvorschläge nahe dem aktuellen Standort des Benutzers anzeigen, wenn der Benutzer mit der Eingabe beginnt.Mit Cordova Google Maps Plugin und Google Orte API zusammen

Ich verwende den folgenden Code Suchfeld oben auf der Karte hinzuzufügen:

<div style="width:100%;height:400px" id="map_canvas"> 
    <div id="searchBox"> 
     <input type="text" id="query" size="30" />    
    </div> 
</div> 

In meinem Controller, ich verwende Google Autocomplete Service stellt eine Liste von Orten in der Nähe des Benutzers aktuellen Standort zu erhalten. Es zeigt die Liste der Orte in der Dropdown-Liste, wenn ich mit der Eingabe anfange.

var input = document.getElementById('query'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 

Allerdings kann ich die Optionen nicht aus der Dropdown-Liste auswählen. Es bewegt die Karte im Hintergrund weiter.

Ich versuchte, die unter-Eigenschaft

map.setClickable(false) 

jedoch, dass die Karte fixiert macht. Ich möchte nicht, dass die Karte repariert wird, und der Benutzer sollte in der Lage sein, die Karte zu verschieben, wenn er dies wünscht.

Ich möchte auch den ausgewählten Ort in der Dropdown-Liste auf die Karte übertragen. Ich möchte diese Informationen verwenden, um der Karte einen Marker hinzuzufügen. Ich kämpfe darum, dass das funktioniert.

Hat jemand das funktionieren lassen? Wenn ja, wären Zeiger oder Beispielcode hilfreich.

Hinweis: Ich bin in der Lage, es funktioniert zu bekommen, wenn Sie Google Maps API + Google Orte API verwenden. Ich möchte das cordova google maps plugin verwenden, da ich es mehr performant als direkt mit der Google Maps API zu hören.

Grüße

Antwort

0

Sie können es auf diese Weise tun (ich benutze jQuery):

$("#query").on("blur", function() { 
      map.setClickable(true); 
     }).on("focus", function() { 
      map.setClickable(false); 
     }).on("keyup", function() { 
      event.stopPropagation(); 
      event.preventDefault(); 
      // searching 
     }); 

Ein weiterer Punkt: Die Karten-Plugin unterstützt Geokodierung, haben einen Blick auf die Dokumentation: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Geocoder

4

Verwendung Die automatische Google-Vervollständigung ist ein Problem, wenn Sie das Plug-in verwenden, da die Ergebnisse auf dem DOM angeheftet sind und visuell unvorhersehbare Ergebnisse haben können.

Ich fand, dass mit dem Autocomplete-Service, und alle Dropdown-Ergebnis Parsing usw. behandeln, um einfacher zu sein.

mit ionischen, können Sie ein Plugin wie https://github.com/israelidanny/ion-google-place oder schauen Sie auf http://devfanaticblog.com/google-places-autocomplete-with-ionic-framework/ verwenden, die in codepen Beispielcode hat

Es ist ein Plugin, das ich groß sein gefunden, aber ich kann den Link, um es nicht finden .