Геолокация в Google Map и HTML5

function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// no native support; maybe try Gears?
}
}

Ответ 2 · рейтинг 2 · Sheikh Ali

function GetGeolocation() {

navigator.geolocation.getCurrentPosition(GetCoords, GetError);

}

теперь проверьте функцию GetCords

function GetCoords(position){

alert('latitude: '+ position.coords.latitude);

alert('longitude: '+ position.coords.longitude);

alert('accuracy: '+ position.coords.accuracy);

FindmeOnMap(position.coords.latitude, position.coords.longitude);

}

Ответ 3 · рейтинг 1 · Barkermn01

// Check for geolocation support
if (navigator.geolocation) {
    // Use method getCurrentPosition to get coordinates
    navigator.geolocation.getCurrentPosition(function (position) {
        // Access them accordingly
        alert(position.coords.latitude + ", " + position.coords.longitude);
    });
}

От

http://robertnyman.com/2010/03/15/geolocation-in-web-browsers-to-find-location-google-maps-examples/

Ответ 4 · Two pi

Это на самом деле довольно просто. Приведенный выше пример из Dive into HTML неполон, так как в нем не показана функция show_map, созданная пользователем, которая на самом деле считывает входящие данные и что-то с ними делает. Вот более полный пример:

<!DOCTYPE HTML>

<html lang = "en">

<head>

  <title>location.html</title>

  <meta charset = "UTF-8" />

  <script type = "text/javascript">

  //<![CDATA[


  function getLoc(){

    navigator.geolocation.getCurrentPosition(showMap);

  } // end getLoc


  function showMap(position){

    var lat = position.coords.latitude;

    var long = position.coords.longitude;

    var linkUrl = "http://maps.google.com?q=" + lat + "," + long;

    var mapLink = document.getElementById("mapLink");

    mapLink.href = linkUrl;

    var embedMap = document.getElementById("embedMap");

    embedMap.src = linkUrl + "&z=16&amp;output=embed";

  } // end showMap


  //]]>

  </script>

</head>


<body onload = "getLoc()">

  <h1>Geolocation Demo</h1>


  <p>

    <a id = "mapLink"

       href = "http://maps.google.com">click for a map</a>

  </p>


<iframe id = "embedMap"

        width="800"

        height="500"

        frameborder="0"

        scrolling="no"

        marginheight="0"

        marginwidth="0"

        src= "">

</iframe><br />


</body>

</html>

В этом примере (из моей будущей книги по HTML5) есть функция getLoc(), вызываемая механизмом загрузки тела. При этом используется функция navigator.geolocation.getCurrentPosition() для запроса вектора разрешений. Появится диалоговое окно разрешения, которое будет отклонено, если пользователь решит не делиться своим текущим положением. Если пользователь подыгрывает, будет отображаться указанная функция обратного вызова (в моем случае showMap).

Функция обратного вызова автоматически принимает объект специальной позиции в качестве единственного параметра. Этот объект имеет ряд потенциально полезных атрибутов, но наиболее полезными являются широта и долгота. Вы можете использовать эти значения, чтобы просто распечатать текущую позицию. Вы также можете объединить эти значения в URL-адрес Google Maps, чтобы получить быструю карту Google для текущего местоположения. Я также встроил карту Google в свою текущую страницу и изменил URL-адрес встроенной карты (iframe), чтобы получить немедленную обратную связь.

Надеюсь это поможет!

Ответ 5 · Jeevan Roy dsouza

Попробуйте этот код

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <!--
    Include the maps javascript with sensor=true because this code is using a
    sensor (a GPS locator) to determine the user's location.
    See: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.

var map;

function initialize() {
  var mapOptions = {
    zoom: 6
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>