Используя API карт Google, как мы можем установить текущее местоположение в качестве заданного по умолчанию местоположения с помощью функции map.setCenter?

Я пишу JavaScript-код с помощью API Карт Google.

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

Приведенный выше код устанавливает местоположение по умолчанию для холста карты в Пало-Альто.

Как мы можем написать script таким образом, чтобы функция setCenter автоматически указывала на текущее местоположение клиента?

Ответ 1

Вы можете использовать API-интерфейс GeoLocation HTML5 в браузерах, которые его поддерживают.

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

Ответ 2

Я могу представить два возможных варианта.

Сначала вы можете рассмотреть возможность использования GeoLocation API в качестве ceejayoz, Это очень просто реализовать, и это полностью клиентское решение. Чтобы центрировать карту, используя GeoLocation, просто используйте:

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

... внутри обратного вызова success() метода GeoLocation getCurrentPosition().

К сожалению, только несколько современных браузеров в настоящее время поддерживают API GeoLocation. Поэтому вы также можете рассмотреть возможность использования серверного решения для разрешения IP-адреса клиента в местоположении пользователя с помощью службы, такой как MaxMind GeoLite City. Затем вы можете просто геокодировать город и страну пользователя внутри браузера, используя API Карт Google. Ниже приведен краткий пример:

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

Просто замените userLocation = 'London, UK' на разрешенный сервер. Ниже приведен скриншот из приведенного выше примера:

Вы можете удалить маркер, избавившись от строки map.addOverlay(new GMarker(bounds.getCenter()));.

Ответ 3

который уже существует в 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);
    }
}

Есть несколько потоков с тем же вопросом...

Ответ 4

Обновленная версия ответа @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'
        });
    }

Ответ 5

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

Ответ 6

Попробуй этого брата: я сосредоточил Индонезию на лат и 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>