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

Я работаю над сервисом на основе местоположения. Я не смог найти четкого ответа, связанного с моими следующими вопросами, и поэтому спрашиваю:

Как включить геолокацию HTML5 на нашем собственном сервере? Или есть какая-то центральная база данных геолокации, которая по умолчанию будет предоставлять службу определения местоположения (например, DNS)?

Я был ошеломлен, увидев точность геолокации на карте Google (http://html5demos.com/geo) на моем ноутбуке (очевидно, без GPS), которая находится в пределах ~ 20 м. Что такое технология? Как реализовать это в нашей собственной системе?

Когда я искал свое IP-местоположение, он показывал офис интернет-провайдера на карте, который находился примерно на 15 км дальше, в отличие от недавней ситуации, когда он показывал почти точное местоположение. В чем может быть причина? может ли это быть потому, что я использую свой телефон Android с тем же маршрутизатором Wireles, и он берет местоположение оттуда? Или в HTML5 они начали находить определенные IP-адреса (что кажется несколько маловероятным).


html geolocation ip-geolocation
person Morison    schedule 01.11.2010    source источник

Ответы (5)


arrow_upward
3
arrow_downward

Вы можете найти много информации о том, как это работает и как использовать это на своих веб-сайтах, в отличном Dive Into. HTML5. В этой книге рекомендуется использовать Modernizr, приведен простой пример:

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

Основной способ работы на вашем ноутбуке — использование известных позиций локальных точек беспроводного доступа. Это немного отличается от браузера к браузеру — у Firefox есть хорошее объяснение здесь. Они используют службы определения местоположения от Google, которые были созданы с помощью карт, сделанных автомобилями Google Street View.

person Colin Pickard    schedule 01.11.2010

arrow_upward
2
arrow_downward 

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

}
person Sheikh Ali    schedule 05.11.2011

arrow_upward
1
arrow_downward 

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

person Barkermn01    schedule 01.11.2010

arrow_upward
0
arrow_downward

Это на самом деле довольно просто. Приведенный выше пример из 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), чтобы получить немедленную обратную связь.

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

person Two pi    schedule 01.11.2010
comment
До сих пор отсутствует технология геолокации в HTML5. Если я не хочу (не хочу) использовать карту Google или службу Google, как мне включить эту службу геолокации на свой собственный сервер? Является ли База данных для IP-геолокации универсальной? Или услуга конкретной компании? - person Morison; 02.11.2010
comment
@Morison способ, которым HTML5 указывает, что геолокация работает, заключается в том, что вы запрашиваете местоположение пользователя из его браузера. Затем браузер предоставляет его, как может. В случае Firefox он отправляет информацию о ближайших точках беспроводного доступа в Google, а затем отправляет результаты обратно на запрашивающий их веб-сайт. Для Mobile Safari и Android он может использовать данные GPS и сотовой связи устройства. Когда у вас есть местоположение, вы можете делать с ним все, что хотите — вам не нужно отображать карту Google, вы можете, например, настроить свой контент для местоположения или отобразить карту из Bing. - person Colin Pickard; 02.11.2010

arrow_upward
0
arrow_downward

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

<!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>
person Jeevan Roy dsouza    schedule 09.01.2014