2016-07-23 9 views
3

Ich verwende Google Maps API v3 auf meinem ASP.NET MVC-Projekt.
Ich möchte dem Benutzer eine Karte anzeigen, die nach einem Ort suchen und dann diesen Ort auswählen und dann abschicken kann (sehr einfach).
In diesem Szenario ist alles in Ordnung, außer dass die vorgeschlagenen Orte abgerufen werden, wenn der Benutzer das Kartensuchfeld eingibt.
Hier ist, wie ich die Google Maps API enthaltenGoogle Maps api place_changed Ereignis nicht Brennen

<script src="https://maps.googleapis.com/maps/api/js?key=Correct_Key_Dot_Worry&libraries=places&callback=initMap" async defer></script> 

html

<body> 
    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <input type="button" value="hakam" id="btntest" /> 
    <div id="map" style="width:500px; height:500px; margin-top:400px"></div> 
</body> 

Javascript

window.initMap = function(){ 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: { lat: -33.8688, lng: 151.2195 }, 
     zoom: 13 
    }); 
    var input = (document.getElementById('pac-input')); 

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    var autocomplete = new google.maps.places.Autocomplete(input); 
    autocomplete.bindTo('bounds', map); 

    var infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
     map: map, 
     anchorPoint: new google.maps.Point(0, -29) 
    }); 

    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     infowindow.close(); 
     marker.setVisible(false); 
     var place = autocomplete.getPlace(); 
     if (!place.geometry) { 
      window.alert("Autocomplete's returned place contains no geometry"); 
      return; 
     } 

     // If the place has a geometry, then present it on a map. 
     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(17); // Why 17? Because it looks good. 
     } 
     marker.setIcon(({ 
      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(35, 35) 
     })); 
     marker.setPosition(place.geometry.location); 
     marker.setVisible(true); 


     var address = ''; 
     if (place.address_components) { 
      address = [ 
       (place.address_components[0] && place.address_components[0].short_name || ''), 
       (place.address_components[1] && place.address_components[1].short_name || ''), 
       (place.address_components[2] && place.address_components[2].short_name || '') 
      ].join(' '); 
     } 

     //infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
     infowindow.setContent('<div><strong>' + "Location(" + place.geometry.location.lat() + "," + place.geometry.location.lng() + ")" + '</strong><br>'); 
     infowindow.open(map, marker); 
    }); 

} 

Problem

der Handler der place_changed wird nicht ausgelöst, und der Code des Handlers wird nicht aufgerufen, wenn ich in das Textfeld der Google Maps-Suche zu schreiben beginnen.

nach etwa 6 Stunden des Suchens und Geist Spinnen, las ich die Dokumentation des Google Maps API über dieses Ereignis, das als die folgenden

war

Dieses Ereignis wird ausgelöst, wenn ein Placeresult für ein zur Verfügung gestellt wird Platzieren Sie den ausgewählten Benutzer. Wenn der Benutzer den Namen eines Orts eingibt, der vom Steuerelement nicht vorgeschlagen wurde, und die Eingabetaste drückt oder eine Ortsdetailanforderung fehlschlägt, wird ein Ereignis place_changed ausgelöst, das die Benutzereingabe in der Eigenschaft name enthält Eigenschaften definiert.

wie die Dokumentation sagt genau, wann ich ich wirklich place_changed Brennen machen dieses Ereignis ‚Eingabe‘ -Taste klicken, und wieder, genau wie die Dokumentation sagt, dass ich die Antwort bekam, die die Benutzereingabe enthält.

Frage Warum in der Hölle die a PlaceResult is NOT made available for a Place the user has selected. (nach der Google-Dokumentation) Was mache ich falsch, damit Google mich von diesem Event abhält?

ANMERKUNG 1
Bitte machen Sie mir keine Fragen auf Stackoverflow zu diesem Thema, weil ich sie alle, eine nach der anderen, vom Morgen (mehr als 6 Stunden) und nichts half mir gelesen haben.

ANMERKUNG 2
Das Beispiel Javascript von Google Maps API-Dokumentation entnommen.

ANMERKUNG 3
Wie unten in den Kommentaren vorgeschlagen, die Sprache und die Region einstellen, während die Google Maps-Bibliothek wie folgt geladen:

<script src="https://maps.googleapis.com/maps/api/js?key=mykey&&language=ar&region=EG&libraries=places&callback=initMap" async defer></script> 

hat mein Problem nicht lösen.

+0

Ich habe es gerade versucht und es scheint wie erwartet zu funktionieren, das Ereignis 'place_changed' wird nicht ausgelöst, wenn Sie Text in die 'Eingabe' einfügen, wenn ein Vorschlag ausgewählt ist oder Sie die Eingabetaste drücken. – Titus

+0

@Titus zuerst hast du das auf deiner Maschine versucht und es hat funktioniert ??? Bitte sagte mir, das ist sehr wichtig, Punkt –

+0

Ja, die Vorschlags-Box wird angezeigt und wenn ich einen Vorschlag wähle der 'place_changed' gefeuert wird, wird es auch ausgelöst, wenn ich die Eingabetaste drücke. – Titus

Antwort

1

Diese Frage wurde in den Kommentaren beantwortet und ich werde das zusammenfassen.
Alles oben (in der Frage) war richtig, keine Fehler bei allen musste ich einfach Google Places API von Google Entwickler-Konsole

Hier ist eine ähnliche Frage auf SO aktivieren: Google Map Autocomplete API not adding address options

By the way: die place_changed Ereignis ist nicht notwendig, um auszulösen, wie Sie in das Suchfeld eingeben, wie ich dachte.