文档章节

基于HTML5的Geolocation获取地理位置,配合Google Map API反向地址解析(获取用户真实地址)

markYun
 markYun
发布于 2017/09/05 15:59
字数 401
阅读 171
收藏 1

  var geocoder;
  var display = "";
  var map;

  function initMap() {
    geocoder = new google.maps.Geocoder();

    if (navigator.geolocation) {
      //获取当前地理位置
      navigator.geolocation.getCurrentPosition(function(position) {
          var coords = position.coords;
          //指定一个google地图上的坐标点,同时指定该坐标点的横坐标和纵坐标
          var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
          var myOptions = {
            zoom: 12, //设定放大倍数
            center: latlng, //将地图中心点设定为指定的坐标点
            mapTypeId: google.maps.MapTypeId.ROADMAP //指定地图类型 
          };
          //创建地图,并在页面map中显示
          map = new google.maps.Map(document.getElementById("map"), myOptions);
          var marker = new google.maps.Marker({
            position: latlng, //将前面设定的坐标标注出来
            map: map //将该标注设置在刚才创建的map中
          });
          //地址名字解析
          geocoder.geocode({
            'location': latlng //纬度/经度坐标
            // 'address': '南京'  string  或者填需要解析的地名.
          }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
             
              display = "地址: " + results[0].formatted_address; //格式化后的最佳匹配地址(地名可小到街道)

            
              var infowindow = new google.maps.InfoWindow({
                content: "<span style='font-size:13px'><b>经纬度: </b>" +
                  "latlng" + latlng + "<br>" + display + "</span>",
                //坐标的偏移量
                pixelOffset: 0,
                position: results[0].geometry.location //GeocoderGeometry 对象

              });
              //默认打开信息窗口,点击也弹出信息窗口
              infowindow.open(map, marker);
              google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
              });
            } else {
              alert("Geocode was not successful for the following reason: " + status);
            }
          });

        },
        function(error) {
          //处理错误
          switch (error.code) {
            case 1:
              alert("位置服务被拒绝。");
              break;
            case 2:
              alert("暂时获取不到位置信息。");
              break;
            case 3:
              alert("获取信息超时。");
              break;
            default:
              alert("未知错误。");
              break;
          }
        });
    } else {
      alert("你的浏览器不支持HTML5来获取地理位置信息。");
    }
  }

 

© 著作权归作者所有

共有 人打赏支持
上一篇: 前端面试题 - 2017
下一篇: java学习资料
markYun
粉丝 82
博文 42
码字总数 50235
作品 0
程序员
私信 提问
HTML5编程之旅 第1站 Geolocation

HTML5 Geolocation 初探 让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息。使用HTML5 Geolocation API(地理定位API),可以请求用户共享他们的...

倪伟伟
2014/02/24
0
0
基于HTML5 geolocation 实现的天气预报功能

最近一直在学习HTML5,因为要开发手机项目所以先把HTML5学习下。 基本思路: 1. 用户未设置任何城市之前,根据HTML5 geolocation 获取用户所在的地理位置。 2. 根据用户设置的城市切换到所在...

随风随影
2013/08/20
2.4K
1
华丽丽的HTML5新特性

Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。作为下一代互联网标准,HTML5自然也是备受期待和瞩目,技 术人员、设计者、互联网爱好者们都在热议HTML5究竟能带来...

小编辑
2011/07/13
1K
1
HTML5 地理位置定位(HTML5 Geolocation)原理及应用 (调用GPS)

博客分类: Div / Css / XML / HTML5 Google / Facebook / Pinterest / SNS 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息...

柒月-小妖精
2016/01/21
804
0
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Navicat使用教程:使用Navicat Premium 12自动执行数据库复制(二)

下载Navicat Premium最新版本 Navicat Premium是一个可连接多种数据库的管理工具,它可以让你以单一程序同时连接到MySQL、Oracle及PostgreSQL数据库,让管理不同类型的数据库更加的方便。 与...

电池盒
22分钟前
1
0
简单聊聊Linux学习经历

学习,是我们一生中都规避不了的一个话题,人的一生中都是在不断的学习,无论是功成名就的人士,还是一无是处的小混混,始终都处在一个不断学习的环境中,只是学习的内容千差万别,有的人是为...

linux-tao
22分钟前
1
0
如何才能从程序员成长为实战型架构师?必掌握这7大实战技能经验

想成为一名架构师,但是架构师对应的技能,我应该掌握哪些啊?以及掌握的程度是什么样的?如何成为一名真正的实战性架构师? 我简要分为以下7点来谈谈,从技能的角度抛砖引玉,希望你对你架构...

mikechen优知
33分钟前
2
0
vue里实现echarts中国地图

echartsDemo.vue <template> <div> <div id="chart_example"></div> </div></template><script> // 首先要 cnpm install echarts import echarts from 'echarts' import ......

Danni3
45分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部