-1

Ich machte eine Funktion, die nächstgelegenen Hotels in Google map.my Code angezeigt wird wie folgt.Setzen Sie Marker in der Callback-Funktion, wo die Position des Benutzers nach dem Erstellen der Karte verfügbar ist

var map; 
 

 
    function initMap() { 
 

 
    var latlng = new google.maps.LatLng(28.535516,77.391026); 
 

 
    if (navigator.geolocation) { 
 
     try { 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 
      var myLocation = { 
 
      lat: position.coords.latitude, 
 
      lng: position.coords.longitude 
 
      }; 
 
      setPos(myLocation); 
 
     }); 
 
     } catch (err) { 
 
     var myLocation = { 
 
      lat: 25.2048, 
 
      lng: 55.2708 
 
     }; 
 
     setPos(myLocation); 
 
     } 
 
    } else { 
 
     var myLocation = { 
 
     lat: 25.2048, 
 
     lng: 55.2708 
 
     }; 
 
     setPos(myLocation); 
 
    } 
 
    } 
 

 
    function setPos(myLocation) { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: myLocation, 
 
     zoom: 10 
 
    }); 
 
    var service = new google.maps.places.PlacesService(map); 
 
    service.nearbySearch({ 
 
     location: myLocation, 
 
     radius: 4000, 
 
     types: ['hotels'] 
 
    }, processResults); 
 
    } 
 

 
    function processResults(results, status, pagination) { 
 
    if (status !== google.maps.places.PlacesServiceStatus.OK) { 
 
     return; 
 
    } else { 
 
     createMarkers(results); 
 
    } 
 
    } 
 

 
    function createMarkers(places) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var placesList = document.getElementById('places'); 
 
    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, 
 
     animation: google.maps.Animation.DROP, 
 
     position: place.geometry.location 
 
     }); 
 

 
     bounds.extend(place.geometry.location); 
 
    } 
 
    map.fitBounds(bounds); 
 
    }
html,body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    #map { 
 
     height: 500px; 
 
     margin: 10px auto; 
 
     width: 800px; 
 
    }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuBzeYkYimIquGG5KkIcB6vFmtHMUzDFo&libraries=places&callback=initMap" async defer></script> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuBzeYkYimIquGG5KkIcB6vFmtHMUzDFo&libraries=places"></script> 
 

 
<div id="map"></div>

obige Beispiel gibt mir am nächsten Hotels um Benutzer Lage. aber ich will Anzeige auch Benutzer Ortszeiger. So wie kann ich zeigen Benutzer Standort hier.

ich auch versuchen, durch das Hinzufügen in initMap() benutzerdefinierte Funktion zu zeigen, Benutzer Marker aber es OVERRIDE mit Hotels Symbole. Wenn ich die Seite zuerst für Mikrosekunden aktualisiere, wird der Benutzerstandort angezeigt und das Hotels-Symbol überschreibt das. hier ist mein Bild mit o/p von oben Code.

Output of Fiddle Snippet

+0

Wie haben Sie versuchen, die Position des Benutzers zu zeigen? Bitte geben Sie eine [mcve] an, die Ihr Problem anzeigt. – geocodezip

+0

Ich platziere den Code beim Start der Funktion. Zuerst bekomme ich den Benutzer lat lang und setze den Marker dort beim Start der 'initMap()' Funktion. –

+0

Bearbeiten Sie Ihre Frage zu zeigen, was Sie meinen. Die Geolocation-Funktionalität ist asynchron, Sie müssen diese Markierung in der Callback-Funktion setzen, wo/wann die Position des Benutzers verfügbar ist (und nach dem Erstellen der Karte ...) – geocodezip

Antwort

1

In die Erstellung des Markers auf die setPos Funktion (wo die Geolocation-Ergebnisse verfügbar sind und die Karte erstellen hat

proof of concept fiddle

wenn Geolocation versagt. screenshot of resulting map on http (when geolocation fails)

wenn Geolocation arbeitet, zeigt es meinen aktuellen Standort.

Code-Schnipsel:

var map; 
 

 
function error() { 
 
    console.log("error!") 
 
    var myLocation = { 
 
    lat: 25.2048, 
 
    lng: 55.2708 
 
    }; 
 
    setPos(myLocation); 
 
} 
 

 
function initMap() { 
 

 
    var latlng = new google.maps.LatLng(28.535516, 77.391026); 
 

 
    if (navigator.geolocation) { 
 
    try { 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 

 
     var myLocation = { 
 
      lat: position.coords.latitude, 
 
      lng: position.coords.longitude 
 
     }; 
 
     setPos(myLocation); 
 
     }, error); 
 
    } catch (err) { 
 
     var myLocation = { 
 
     lat: 25.2048, 
 
     lng: 55.2708 
 
     }; 
 
     setPos(myLocation); 
 
    } 
 
    } else { 
 
    var myLocation = { 
 
     lat: 25.2048, 
 
     lng: 55.2708 
 
    }; 
 
    setPos(myLocation); 
 
    } 
 
} 
 

 
function setPos(myLocation) { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: myLocation, 
 
    zoom: 10 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: myLocation, 
 
    map: map, 
 
    title: "My Position" 
 
    }) 
 
    var service = new google.maps.places.PlacesService(map); 
 
    service.nearbySearch({ 
 
    location: myLocation, 
 
    radius: 4000, 
 
    types: ['hotels'] 
 
    }, processResults); 
 
} 
 

 
function processResults(results, status, pagination) { 
 
    if (status !== google.maps.places.PlacesServiceStatus.OK) { 
 
    return; 
 
    } else { 
 
    createMarkers(results); 
 
    } 
 
} 
 

 
function createMarkers(places) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var placesList = document.getElementById('places'); 
 
    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, 
 
     animation: google.maps.Animation.DROP, 
 
     position: place.geometry.location 
 
    }); 
 

 
    bounds.extend(place.geometry.location); 
 
    } 
 
    map.fitBounds(bounds); 
 
}
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#map { 
 
    height: 100%; 
 
    margin: 10px auto; 
 
    width: 100%; 
 
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script> 
 
<div id="map"></div>

+0

Danke, Bruder, es funktioniert für mich. aber problem ist es zeigt zwei marker in meinem div und seine lage ist nicht genau. kannst du helfen> –

Verwandte Themen