文档章节

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

markYun
 markYun
发布于 2017/09/05 15:59
字数 401
阅读 41
收藏 1
点赞 0
评论 0

  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来获取地理位置信息。");
    }
  }

 

© 著作权归作者所有

共有 人打赏支持
markYun
粉丝 83
博文 42
码字总数 50235
作品 0
程序员
HTML5编程之旅 第1站 Geolocation

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

倪伟伟
2014/02/24
0
0
可以在前端实现的几个地理位置小功能

下文转自:http://www.oncoding.cn/2010/geo-location-frontend 在Smashing Magazine上看到这篇Entering The Wonderful World of Geo Location ,介绍了获取并处理用户地理位置的应用和方法,...

晨曦之光
2012/03/09
0
0
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
HTML5 Geolocation API和Google Maps API结合实现路线导航

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来...

iNiL0119
2016/09/14
103
0
html5如何利用百度地图快速的定位经纬度

定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则...

燚轩科技
05/14
0
0
【HTML5初探之Geolocation API】让我们获取女神的地址

导航 【初探HTML5之使用新标签布局】用html5布局我的博客页! 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面...

范大脚脚
2017/12/14
0
0
Geolocation :基于浏览器的定位服务

关于 Geolocation 对象 随着 Opera 10.6 和 Safari 5的相继发布,截止到目前为止,W3C 中一个名为 Geolocation 的 API 规范在所有非 IE 浏览器中都得到了实现。简单地说,Geoloaction 的作用...

lisn
2013/05/10
0
0
HTML5 Geolocation 定位服务 实例

本例采用html5 Geolocation 定位服务 和 google maps api 3 完成,运行时请确保你的浏览器支持 html5. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, u......

张亚锋
2012/05/08
0
0
JS原生系列-DOM篇(延伸)

关于DOM,这就是最后一部分了,这部分都是后台或者最新的dom api,学的时候需要多的记忆一次,有印象有保障! -.ajax的介绍:ajax输出json格式文件 jsonp的介绍 xhr2的介绍 http://www.w3sch...

透笔度
2015/08/10
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
1
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
12
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
2
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
1
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
0
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
3
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部