当前位置： 文江博客话题详情

谷歌地图和 HTML5 中的地理位置

发布于 2024-09-30 03:19:15 字数 378 浏览 0 评论 0原文

我正在研究基于位置的服务。我找不到与以下查询相关的任何明确答案，因此我询问 -

如何在我们自己的服务器中启用 HTML5 地理定位？或者是否有任何中央地理定位数据库默认提供位置服务（如 DNS）？

我很惊讶地看到我的笔记本电脑（显然没有 GPS）中的谷歌地图（http://html5demos.com/geo）中的地理定位精度在约 20M 范围内。技术是什么？如何在我们自己的系统中实现呢？

当我过去搜索我的 IP 位置时，它通常会在地图上显示 ISP 办公室，距离大约 15 公里远，而最近的情况则显示几乎准确的位置。可能是什么原因？难道是因为我使用 Android 手机使用相同的无线路由器，并且它从那里获取位置？或者在 HTML5 中，他们开始定位特定的 IP 地址（这似乎不太可能）。

原文

I am working on location based service. I couldn't find any clear answer related to my following queries and so am asking-

How to enable HTML5 geolocation in our own server? Or is there any central geolocation DB there which will provide location service by default (like DNS)?

I was stunned seeing the accuracy of geolocation in google map (http://html5demos.com/geo) in my laptop (obviously GPS free) which is within ~20M range. What is the technology? How to implement that in our own system?

When I used to search my IP location, it used to show the ISP office in the map which is ~15 KM further as opposed to recent situation where it is showing almost exact location. What might be the reason? could it be because I use my android phone using the same Wireles router and it takes the location from there? Or in HTML5 they started locating specific IP addresses (which seems somewhat unlikely).

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

再可℃爱ぅ一点好了 2024-10-07 03:19:15

您可以在优秀的 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 的定位服务，它们是通过谷歌街景汽车绘制的地图创建的。

You can find a lot of information on how this works and how to use it in your own websites in the excellent Dive Into HTML 5. This book recommends using Modernizr, a simple example of which is provided:

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

The primary way it is working on your laptop is by using the known positions of local wireless
access points. This varies a little from browser to browser - firefox has a good explanation here. They use positioning services from Google, which were created by mapping done by Google's Street View cars.

回复 原文
满意归宿 2024-10-07 03:19:15
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);

}

function GetGeolocation() {

navigator.geolocation.getCurrentPosition(GetCoords, GetError);

}

now check the GetCords function

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

}
回复 原文
﹂绝世的画 2024-10-07 03:19:15
// 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/

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

From

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

回复 原文
苏别ゝ 2024-10-07 03:19:15

其实很简单。上面来自 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&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 书籍）有一个由 body onload 机制调用的 getLoc() 函数。这使用 navigator.geolocation.getCurrentPosition() 函数来请求权限向量。它将弹出一个权限对话框，如果用户选择不共享当前位置，该对话框将被拒绝。如果用户确实一起玩，将显示指定的回调函数（在我的例子中为 showMap）。

回调函数自动接受特殊位置对象作为其唯一参数。该对象具有许多潜在有用的属性，但纬度和经度是最有帮助的。您可以使用这些值来简单地打印出当前位置。您还可以将这些值连接到 Google 地图 URL 中，以获取当前位置的快速 Google 地图。我还在当前页面中嵌入了 Google 地图，并更改了嵌入 (iframe) 地图的 URL 以获取即时反馈。

希望这有帮助！

It's actually pretty simple. The above example from Dive into HTML is incomplete, as it doesn't show the show_map function, which is a user-created function that actually reads the incoming data and does something with it. Here's a more complete example:

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

This example (from my upcoming HTML5 book) has a getLoc() function called by the body onload mechanism. This uses the navigator.geolocation.getCurrentPosition() function to request a permission vector. It will pop up a permission dialog, which will be rejected if the user chooses not to share her current position. If the user does play along, the indicated callback function (in my case showMap) will be displayed.

The callback function automatically accepts a special position object as its only parameter. This object has a number of potentially useful attributes, but latitude and longitude are the most helpful. You can use these values to simply print out the current position. You can also concatenate these values into a Google maps URL to get a quick Google map of the current location. I also embedded a Google map into my current page, and changed the URL of the embedded (iframe) map to get immediate feedback.

Hope this helps!

回复 原文
玩套路吗 2024-10-07 03:19:15

试试这个代码

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

Try This Code

<!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 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lioqio

文章 0 评论 0

Single

文章 0 评论 0

禾厶谷欠

文章 0 评论 0

alipaysp_2zg8elfGgC

文章 0 评论 0

qq_N6d4X7

文章 0 评论 0

放低过去

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文