it-swarm.com.de

Wie können Sie mithilfe der Google Maps-API den aktuellen Speicherort als Standardspeicherort festlegen, indem Sie die Funktion map.setCenter verwenden?

Ich schreibe JavaScript-Code mithilfe der Google Maps-API.

map = new google.maps.Map2(document.getElementById("map_canvas"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);

Der obige Code legt die Standardposition des Kartenbereichs auf Palo Alto fest. 

Wie können wir das Skript so schreiben, dass die setCenter-Funktion automatisch auf den aktuellen Standort des Clients zeigt?

19
HVS

Sie können die HTML5-GeoLocation-API in Browsern verwenden, die dies unterstützen.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  alert('geolocation not supported');
}

function success(position) {
  alert(position.coords.latitude + ', ' + position.coords.longitude);
}

function error(msg) {
  alert('error: ' + msg);
}
15
ceejayoz

Ich kann mir zwei Möglichkeiten vorstellen.

Zuerst möchten Sie vielleicht die Verwendung der GeoLocation API als ceejayoz betrachten. Dies ist sehr einfach zu implementieren und ist eine vollständig clientseitige Lösung. Um die Karte mit GeoLocation zu zentrieren, verwenden Sie einfach: 

map.setCenter(new google.maps.LatLng(position.coords.latitude, 
                                     position.coords.longitude), 13);

... im success()-Callback der getCurrentPosition()-Methode von GeoLocation.

Leider unterstützen derzeit nur wenige moderne Browser die GeoLocation-API. Daher können Sie auch die Verwendung einer serverseitigen Lösung in Betracht ziehen, um die IP-Adresse des Clients mit einem Dienst wie MaxMinds GeoLite City am Standort des Benutzers aufzulösen. Anschließend können Sie die Stadt und das Land des Nutzers mithilfe des Google Maps-API einfach im Browser geokodieren. Folgendes könnte ein kurzes Beispiel sein:

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Geocoding Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var userLocation = 'London, UK';

    if (GBrowserIsCompatible()) {
       var geocoder = new GClientGeocoder();
       geocoder.getLocations(userLocation, function (locations) {         
          if (locations.Placemark) {
             var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
             var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
             var east  = locations.Placemark[0].ExtendedData.LatLonBox.east;
             var west  = locations.Placemark[0].ExtendedData.LatLonBox.west;

             var bounds = new GLatLngBounds(new GLatLng(south, west), 
                                            new GLatLng(north, east));

             var map = new GMap2(document.getElementById("map_canvas"));

             map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
             map.addOverlay(new GMarker(bounds.getCenter()));
          }
       });
    }
    </script> 
  </body> 
</html>

Ersetzen Sie einfach userLocation = 'London, UK' durch die serverseitig aufgelöste Adresse. Das Folgende ist ein Screenshot aus dem obigen Beispiel:

Render google map in based on selected location

Sie können den Marker entfernen, indem Sie die Zeile map.addOverlay(new GMarker(bounds.getCenter())); entfernen.

9
Daniel Vassallo

das existiert bereits in der Google-API:

if (GBrowserIsCompatible()) 
{   
    var map = new google.maps.Map2(document.getElementById("mapdiv"));

    if (google.loader.ClientLocation) 
    {        
        var center = new google.maps.LatLng(
            google.loader.ClientLocation.latitude,
            google.loader.ClientLocation.longitude
        );
        var zoom = 8;

        map.setCenter(center, zoom);
    }
}

Es gibt mehrere Threads mit der gleichen Frage ...

8
Txugo

Eine aktualisierte Version von @ ceejayozs Antwort:

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        alert('geolocation not supported');
    }
    function error(msg) {
        alert('error: ' + msg);
    }
    function success(position) {

        var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var mapOptions = {
            zoom: 12,
            center: myLatlng,
            scaleControl: false,
            draggable: false,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false
        }


        map = new google.maps.Map(document.getElementsByClassName('map-canvas')[0], mapOptions);
        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Main map',
            icon: iconBase + 'arrow.png'
        });
    }
0
user1012181

Diese Lösung versucht, den Benutzerstandort zuerst vom Browser abzurufen. Wenn der Benutzer dies ablehnt oder ein anderer Fehler auftritt, erhält er den Ort von der IP-Adresse des Benutzers

mapUserLocation = () => {
  navigator.geolocation
    ? navigator.geolocation.getCurrentPosition(
        handlePosition,
        getLocationFromIP
      )
    : getLocationFromIP();
};

getLocationFromIP = () => {
  fetch("http://ip-api.com/json")
    .then(response => response.json())
    .then(data => {
      data.lat &&
        data.lon &&
        updateUserPosition({
          lat: data.lat,
          lng: data.lon
        });
    })
    .catch(error => {
      console.log(`Request failed: `, error);
    });
};

handlePosition = position => {
  const userPos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };
  updateUserPosition(userPos);
};

updateUserPosition = position => {
  map.setCenter(position, 13);
};

und nennen Sie es wie: 

mapUserLocation();
0
Mas