麻辣GIS微信平台

更多 GIS 干货

微信关注不错过

Google Maps(JS)开发入门(4):使用HTML5 Geolocation属性定位

这是HTML5增加的新属性,在之前的文章中我已经详细介绍过了,本文只是引用的是Google Maps官方的例子。

关于HTML5获取经纬度的详细例子以及详细参数,可以查看这里。关于HTML5 Geolocation其他详细内容,可以查看这里

本文的效果图

核心代码

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 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>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&key=你的KEY&sensor=true"></script>
    <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 6
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
      //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 {
        //如果不支持HTML5
        handleNoGeolocation(false);
      }
    }
    function handleNoGeolocation(errorFlag) {
      if (errorFlag) {
        var content = '错误: Geolocation服务获取失败';
      } else {
        var content = '错误: 浏览器不支持HTML5';
      }
      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);
&lt;/script&gt;

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

把这段代码直接复制保存为.html文件,然后修改你的API Key即可使用。

后话

因为在写本文之前已经写过了利用html5获取经纬度并且在google map显示位置,更多详细内容请移步。

麻辣GIS-Sailor
作者:
GIS爱好者,学GIS,更爱玩GIS。
微博关注
手机阅读
赞赏支持
手机阅读
微信捐助麻辣GIS
微信打赏
支付宝捐助麻辣GIS
支付宝打赏

声明

1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。

3.如果本文对您有所帮助,请您对我们团队进行 打赏捐助让我们在传播3S的路上可以走得更远,不胜感激。PS:如果你是学生党,请优先把经费用于购买学习资料 以及 与小哥哥/小姐姐约会上:-)

如您有疑问,可在文末留言,或到麻辣GIS QQ群中提问。

QQ群(一):291616564 加入QQ群

QQ群(二):166408035 加入QQ群

QQ群(三):627853279 加入QQ群

QQ群(四):436386604 加入QQ群

QQ群(五):606176554 加入QQ群

QQ群(六):946178380 加入QQ群

QQ群(七):861271808 加入QQ群

新疆互助群:910717627 加入QQ群

微信公众号:malagis,扫描右边二维码直接关注。

发表评论