2016-11-19 4 views
2

ich die neueste Google Map API v3 verwenden und versuchen, die Folgendes zu erreichen:Google Map API Dateifeld mit Platz-Id

  1. -Center-Benutzer auf der Karte beim Laden der Seite auf einem mobilen Gerät. Ich habe das in dem Code unten funktioniert.

  2. Die Benutzer können einen POI aus der Karte anklicken/berühren und das Infofenster anzeigen. Dies funktioniert auch, da es eine grundlegende Funktion von Google Maps ist.

  3. Dies ist, wo ich ratlos bin. Ich muss 2 Felder mit dem Namen des POI aus dem Info-Fenster im 1. Feld und dem 2. Feld der Place-ID füllen können.

Hier ist, was ich bisher gefunden habe: https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder

Dieser Link ermöglicht die Suche von Orten und die Markierung, die ein Info-Fenster mit der Place-ID des gesuchten Ort produziert gefüllt wird. Wenn Sie jedoch auf einen der POIs außerhalb des Markers klicken, gibt es keine Place_IDs.

Die andere schließt Lösung: Get placeId on google maps when POI is clicked

Diese Lösung ermöglicht es Ihnen, den Platz-ID klicken und sehen, aber es gibt zwei Hauptprobleme. 1. Derselbe POI aus dem ersten Link oben erzeugt eine andere Orts-ID als diese Lösung für den exakt gleichen Ort. Zusätzlich erzeugt es eine Orts-ID für jeden Punkt auf der Karte, unabhängig davon, ob sich ein POI in der Nähe befindet.

Hier ist mein Code so weit:

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 17, 
     streetViewControl: false, 
     mapTypeControl: false 
    }); 
    var infoWindow = new google.maps.InfoWindow({map: map}); 

    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     map.setCenter(pos); 
     }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
    } 

    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
    } 

Ich würde kein Licht sehr schätzen, die auf, warum die vergossen werden könnten Platz-IDs ist immer unterschiedlich zwischen diesen Methoden und möglichen Lösungen auf immer die wahren Platz-ID aus ein Klickereignis Vielen Dank!

Antwort

1

Sie können die Klickereignisse auf der Karte abhören. Wenn Sie auf das POI-Symbol klicken, wird IconMouseEvent ausgelöst.

Nach der Dokumentation:

google.maps.IconMouseEvent Objektspezifikation

Dieses Objekt in einem Ereignis wird gesendet, wenn ein Benutzer auf ein Symbol auf der Karte klickt. Die Orts-ID dieses Ortes ist im placeId-Mitglied gespeichert. Um zu verhindern, dass das Standardinformationsfenster angezeigt wird, rufen Sie die stop() -Methode für dieses Ereignis auf, um zu verhindern, dass es weitergegeben wird. Weitere Informationen zu Bereichs-IDs finden Sie im Entwicklerhandbuch für Google Places-APIs.

Dieses Objekt erweitert MouseEvent.

Bitte werfen Sie einen Blick auf diesen Beispielcode, um herauszufinden, wie sich die Ereignisse verwenden, mit Platz ID:

http://jsbin.com/parapex/10/edit?html,output

Hoffe, es hilft!

+0

Das es genau was ich brauchte! Vielen Dank. Ich fügte die 4 Felder hinzu, die ich füllen muss, und es funktioniert. https://jsbin.com/nuxadi/edit?html,output Alles, was ich jetzt tun muss, ist die Anweisungen zwischen 2 POI-Funktion zu entfernen. –