Google Map Geolocation und Zeigt eine Geschäftsart

Question

Zunächst möchte ich allen danken, die mir helfen könnten, und sagen, dass ich ein Anfänger bei der Entwicklung bin.

Ich versuche, den Code für eine Google Map mit Geolocalization nur mit Markierungen auf Autovermietung Art der Plätze. Die Idee ist, dass, wenn ein Besucher meiner Webseite auf die Seite gelangt, die Karte die Besucherposition geolokalisiert und die Karte nur Mietwagenstationen in der Nähe zeigt.

bekam ich den Geolokalisierungssysteme Google Code:

<div id="map" style="width: 100%; height: 500px;"></div> 
<script> 
    // Note: This example requires that you consent to location sharing when 
    // prompted by your browser. If you see the error "The Geolocation service 
    // failed.", it means you probably did not give permission for the browser to 
    // locate you. 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 6 
    }); 
    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.'); 
    } 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=[MYAPIKEY]&callback=initMap"> 
</script> 

Und es funktioniert gut, aber jetzt, ich lese über Orte und Typen und es gelingt mir nicht.

Irgendeine Idee? Kann mir jemand helfen?

Mit freundlichen Grüßen und vielen Dank im Voraus.

Jordi V. CarRentals.Deals

Answer 1

Die Funktionen im Google Places-JavaScript-Bibliothek ermöglichen, Ihre Anwendung nach Orten zu suchen (in dieser API als Einrichtungen definiert, geografische Standorte oder Points of Interest) in einem enthaltenes definierter Bereich, z. B. die Grenzen einer Karte oder um einen festen Punkt.

Die Google Places-API bietet eine Funktion zur automatischen Vervollständigung, mit der Sie Ihren Anwendungen das Suchverhalten bei der Suche nach einer Vorauswahl im Google Maps-Suchfeld zuweisen können. Wenn ein Benutzer beginnt, eine Adresse einzugeben, füllt die automatische Vervollständigung den Rest aus. Weitere Informationen finden Sie unter autocomplete documentation.

In meinem Beispiel habe ich verwendet In der Nähe suchen - können Sie nach Orten in einem bestimmten Bereich nach Schlüsselwort oder Typ suchen. Es verwendet die LocalSearch() -Methode von PlacesService, die ein Array von PlaceResult-Objekten zurückgibt. Um mehr zu erfahren, können Sie überprüfen, this Link. Jetzt schauen wir uns die Code-Aufteilung an.

Sie können entweder die Eigenschaft 'Grenzen' oder 'Ort' verwenden, in unserem Fall verwenden wir 'Ort'. Beachten Sie, dass Sie, wenn Sie "Standort" verwenden, auch die Eigenschaft "Radius" angeben müssen. Der maximal zulässige "Radius" beträgt 50 000 Meter. Wir haben auch "Typ" -Eigenschaft verwendet. Es beschränkt die Ergebnisse auf Orte, die dem angegebenen Typ entsprechen. Es kann nur ein Typ angegeben werden (wenn mehr als ein Typ angegeben wird, werden alle Typen ignoriert, die auf den ersten Eintrag folgen). Siehe die list of supported types.

Die Callback-Funktion akzeptiert zwei Argumente. Das Ergebnis und der Status. Sie können eigene Argumentnamen erstellen. Dies (Callback) ist der Ort, an dem wir Codes hinzufügen werden, die Sie ausführen möchten, wenn das Argument 'Status' in Ordnung ist. Die Callback-Funktion:

function(results, stat){ 
      if (stat === google.maps.places.PlacesServiceStatus.OK) { 
      for (var i = 0; i < results.length; i++) { 
       var place = results[i]; 
       createMarker(results[i], map);   
      }   
      }  
     });  

}); 

Wenn das Ergebnis in Ordnung ist, sind die zurückgegebenen Werte in einem Array, so dass Sie durch die einzelnen Array zu durchlaufen müssen und sie als Google Marker angezeigt werden soll. Um mehr über Google Marker zu erfahren, können Sie this überprüfen.Hier ist die Definition der Funktion create:

function createMarker(place, map) { 
    var placeLoc = place.geometry.location; 
    infowindow = new google.maps.InfoWindow(); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
}); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(place.name); 
     infowindow.open(map, this); 
    }); 
} 

komplette Code hier:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title></title> 
    <style> 
    html,body,#map { 
     width:100%; 
     height:100%; 
    } 
    </style> 
</head> 
<body> 
<div id="map"></div> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places"> 
</script> 
<script> 
function initMap() { 
var map; 
var infowindow; 
// Try HTML5 geolocation. 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition(function(position) { 
var pos = { 
lat: position.coords.latitude, 
lng: position.coords.longitude 
}; 
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
map = new google.maps.Map(document.getElementById('map'), { 
    center:location, 
    zoom: 12 
}); 
var service = new google.maps.places.PlacesService(map); 
service.nearbySearch({ 
location: location, 
radius: 500, 
type: ['car_rental'] 
}, function(results, stat){ 
if (stat === google.maps.places.PlacesServiceStatus.OK) { 
for (var i = 0; i < results.length; i++) { 
var place = results[i]; 
createMarker(results[i], map);   
}   
}  
});  
}); 
} else { 
alert("Browser doesn't support Geolocation"); 
} 
} 
function createMarker(place, map) { 
var placeLoc = place.geometry.location; 
infowindow = new google.maps.InfoWindow(); 
var marker = new google.maps.Marker({ 
    map: map, 
    position: place.geometry.location 
}); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(map, this); 
}); 
}  
</script> 
</body> 
</html> 

Arbeiten Demo here.

Hoffe es hilft!