文档章节

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

markYun
 markYun
发布于 2017/09/05 15:59
字数 401
阅读 127
收藏 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
可以在前端实现的几个地理位置小功能

下文转自: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

没有更多内容

加载失败,请刷新页面

加载更多

存储过程知识点收集

记录下,以后要常用的问题 1、获取刚刚插入数据产生的ID SCOPE_IDENTITY 返回当前作用域的插入后产生的一条ID @@IDENTITY 返回当前表的最后一条ID

轻轻的往前走
4分钟前
0
0
elixir keyword和map的区别

┌──────────────┬────────────┬───────────────────────┐ │ Keyword List │ Map/Struct │ HashDict (deprec...

wmzsonic
7分钟前
0
0
解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐

<table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-show-columns="true" data-fixed-columns="true" data-fixed-number="3"></table> 含有dat......

tianyawhl
10分钟前
0
0
ES6 系列之 defineProperty 与 proxy

摘要: ## 前言 我们或多或少都听过“数据绑定”这个词,“数据绑定”的关键在于监听数据的变化,可是对于这样一个对象:`var obj = {value: 1}`,我们该怎么知道 obj 发生了改变呢? ## def...

阿里云官方博客
15分钟前
0
0
美团点评携手 PingCAP 开启新一代数据库深度实践之旅

一、背景和现状 在美团,基于 MySQL 构建的传统关系型数据库服务已经难于支撑公司业务的爆发式增长,促使我们去探索更合理的数据存储方案和实践新的运维方式。随着近一两年来分布式数据库大放...

TiDB
15分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部