геолокация в карте Google и HTML5 - PullRequest
Новая
       4

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

1 голос
/ 01 ноября 2010

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

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

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

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

Ответы [ 5 ]

3 голосов
/ 01 ноября 2010

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

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

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

2 голосов
/ 05 ноября 2011 
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);

}
1 голос
/ 01 ноября 2010 
// 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/

0 голосов
/ 09 января 2014

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

<!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>
0 голосов
/ 01 ноября 2010

Это на самом деле довольно просто. Приведенный выше пример из Dive to 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, чтобы получить быструю карту Google текущего местоположения. Я также встроил карту Google в свою текущую страницу и изменил URL-адрес встроенной (iframe) карты, чтобы получить немедленный отзыв.

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

...