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

Ich schreibe JavaScript-Code mit Google Maps API.Wie können wir mithilfe der Google Maps-API den aktuellen Standort als Standard-Standort festlegen, indem Sie die Funktion map.setCenter verwenden?

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

Der obige Code legt den Standardspeicherort für den Kartenbereich in Palo Alto fest.

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

Quelle

2010-05-17 HVS

Die Geolocation-API ist die offensichtliche Antwort. Auch wenn die API verfügbar ist, kann es auf der Seite des Browsers einige Zeit dauern, um eine Standortkorrektur zu erhalten. In der Zwischenzeit müssen Sie dem Benutzer einen temporären Standort anzeigen und die Karte verschieben, sobald der Standort festgelegt wurde. Das klingt wie eine GUI-Herausforderung, damit es sich richtig anfühlt. Ich mag Daniel Vassallos Lösung, wenn ein ungefährer Standort akzeptabel ist. Das Verschieben der Karte nach dem Laden ist für mich fraglich. –

-1

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

Quelle

2010-05-17 17:17:36 nex

Der obige Code lädt die Karte mit dem als palo alto festgelegten Ort. Meine eigentliche Frage war, wie können wir den Standort automatisch auf den aktuellen Standort des Clients einstellen. – HVS

Oh, ich sehe ... für das würden Sie Geolocation-Funktionen benötigen ... beginnen Sie das lesen: http://www.mozilla.com/en/firefox/geolocation/ – nex

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); 
}

Quelle

2010-05-17 17:32:22 ceejayoz

http://isgeolocationpartofhtml5.com/ – npdoty

@ npdoty möglich HTML5 die Marke nicht die Spezifikation ist hier relevant. – Ross

Beachten Sie, dass map.setCenter keine Zoomstufe mehr akzeptiert. Wenn Sie auch die Zoomstufe ändern möchten, verwenden Sie map.setZoom. – superluminary

Ich kann mir zwei mögliche Optionen vorstellen.

Zuerst sollten Sie die GeoLocation API als ceejayoz suggested betrachten. Dies ist sehr einfach zu implementieren und eine vollständig clientseitige Lösung. Um die Karte zu zentrieren GeoLocation verwenden, verwenden Sie einfach:

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

... innerhalb des success() Rückruf der getCurrentPosition() Methode des GeoLocation.

Leider unterstützen derzeit nur wenige moderne Browser die GeoLocation API. Daher können Sie auch eine serverseitige Lösung in Betracht ziehen, um die IP-Adresse des Clients am Standort des Benutzers mithilfe eines Dienstes wie MaxMind's GeoLite City aufzulösen. Anschließend können Sie die Stadt und das Land des Nutzers im Browser mithilfe der Google Maps-API einfach geocodieren. Im 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>

einfach userLocation = 'London, UK' mit der serverseitigen aufgelösten Adresse ersetzen. Nachstehend ist ein Screenshot aus dem obigen Beispiel:

Render google map in based on selected location

Sie können die Markierung entfernen, indem die map.addOverlay(new GMarker(bounds.getCenter())); Linie loszuwerden.

Quelle

2010-05-17 18:33:36

Guter Punkt re: geolocating von IP. – ceejayoz

Danke für die Erklärung. Es ist mir nie in den Sinn gekommen, dass die clientseitige Komponente, die üblicherweise verwendet wird (vor HTML5), keine vollständig integrierte Geolocation-Unterstützung hat. – HVS

die bereits in der Google-API vorhanden ist:

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 ...

Quelle

2011-02-07 18:33:55 Txugo

Eine aktualisierte Version der Antwort des @ ceejayoz:

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' 
     }); 
    }

Quelle

2015-01-09 15:12:18 user1012181

-1

Try dieser bro: Ich zentrierte Indonesien mit lat und lng.

$(document).ready(function() { 
 
    var mapOptions = { 
 
     zoom: 4, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 
    
 
    var center = new google.maps.LatLng(-2.548926, 118.0148634); 
 
    map.setCenter(center,4); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 
 

 
<div id="map" style="width:600px; height:450px"></div>

Quelle

2015-01-09 16:34:33

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

Antwort

Verwandte Themen