精华内容
下载资源
问答
  • HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理位置信息并定位的方法,需要的...

    HTML5实现获取地理位置信息并定位功能

    前言

         这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理位置信息并定位的方法,需要的朋友可以参考下。

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

    如何使用HTML5地理位置定位功能

          定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可。

     

    function getLocation(){ 
    if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(showPosition,showError); 
    }else{ 
    alert("浏览器不支持地理定位。"); 
    } 
    }

     

          从上面的代码可以知道,如果用户设备支持地理定位,则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象,getCurrentPosition() 方法的第二个参数showError用于处理错误,它规定当获取用户位置失败时运行的函数。

          我们先来看函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式:

     

    function showError(error){ 
    switch(error.code) { 
    case error.PERMISSION_DENIED: 
    alert("定位失败,用户拒绝请求地理定位"); 
    break; 
    case error.POSITION_UNAVAILABLE: 
    alert("定位失败,位置信息是不可用"); 
    break; 
    case error.TIMEOUT: 
    alert("定位失败,请求获取用户位置超时"); 
    break; 
    case error.UNKNOWN_ERROR: 
    alert("定位失败,定位系统失效"); 
    break; 
    } 
    }

     

    我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。

     

    function showPosition(position){ 
    var lat = position.coords.latitude; //纬度 
    var lag = position.coords.longitude; //经度 
    alert('纬度:'+lat+',经度:'+lag); 
    }

     

    利用百度地图和谷歌地图接口获取用户地址

          上面我们了解了HTML5的Geolocation可以获取用户的经纬度,那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口,我们只需要将HTML5获取到的经纬度信息传给地图接口,则会返回用户所在的地理位置,包括省市区信息,甚至有街道、门牌号等详细的地理位置信息。

          我们首先在页面定义要展示地理位置的元素,分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。

      先来看百度地图接口交互,我们将经纬度信息通过Ajax方式发送给百度地图接口,接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据,我们可以根据需求将需要的信息展示给#baidu_geo。注意这里用到了jQuery库,需要先加载jQuery库文件。

     

     function showPosition(position){ 
    var latlon = position.coords.latitude+','+position.coords.longitude; 
    //baidu 
    var url = "
    <ahref="http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0</a>"; 
    $.ajax({ 
    type: "GET", 
    dataType: "jsonp", 
    url: url, 
    beforeSend: function(){ 
    $("#baidu_geo").html('正在定位...'); 
    }, 
    success: function (json) { 
    if(json.status==0){ 
    $("#baidu_geo").html(json.result.formatted_address); 
    } 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
    $("#baidu_geo").html(latlon+"地址位置获取失败"); 
    } 
    }); 
    });

     

          再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口,接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据,这些JSON数据比百度地图接口返回的要更详细,我们可以根据需求将需要的信息展示给#google_geo。

     

    function showPosition(position){ 
    var latlon = position.coords.latitude+','+position.coords.longitude; 
    //google 
    var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'; 
    $.ajax({ 
    type: "GET", 
    url: url, 
    beforeSend: function(){ 
    $("#google_geo").html('正在定位...'); 
    }, 
    success: function (json) { 
    if(json.status=='OK'){ 
    var results = json.results; 
    $.each(results,function(index,array){ 
    if(index==0){ 
    $("#google_geo").html(array['formatted_address']); 
    } 
    }); 
    } 
    }, 
    error: function (XMLHttpRequest, textStatus, errorThrown) { 
    $("#google_geo").html(latlon+"地址位置获取失败"); 
    } 
    }); 
    }

     

          以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中,我们可以根据实际情况进行调用。当然这只是一个简单的应用,我们可以根据这个简单的示例开发出很多复杂的应用,建议用手机浏览器访问DEMO演示。

    美文美图

    展开全文
  • html5实现获取地理位置信息并定位

    千次阅读 2018-12-13 11:50:10
    这里主要讲h5实现获取地理位置信息并定位功能,本文讲解了原生h5,百度地图,谷歌地图等三种获取地理信息并定位的方法,需要的朋友可以参考下: h5提供了地理位置功能(Geolocation API),能确定用户位置,我们可以...

    这里主要讲h5实现获取地理位置信息并定位功能,本文讲解了原生h5,百度地图,谷歌地图等三种获取地理信息并定位的方法,需要的朋友可以参考下:

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

      如何使用h5地理位置定位功能

      定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可。

        

      

    function getLocation(){ 

      if (navigator.geolocation){ 

        navigator.geolocation.getCurrentPosition(showPosition,showError); 

      }else

        alert("浏览器不支持地理定位。"); 

      

     

      上面的代码可以知道,如果用户设备支持地理定位,则运行  getCurrentPosition() 如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象,getCurrentPosition() 方法的第二个参数showError用于处理错误,它规定当获取用户位置失败时运行的函数。

      我们先来看一下函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式:

      

      

    function showError(error){ 

      switch(error.code) { 

        case error.PERMISSION_DENIED: 

          alert("定位失败,用户拒绝请求地理定位"); 

          break

        case error.POSITION_UNAVAILABLE: 

          alert("定位失败,位置信息是不可用"); 

          break

        case error.TIMEOUT: 

          alert("定位失败,请求获取用户位置超时"); 

          break

        case error.UNKNOWN_ERROR: 

          alert("定位失败,定位系统失效"); 

          break

      

        

       我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。

     

        

    function showPosition(position){ 

      var lat = position.coords.latitude; //纬度 

      var lag = position.coords.longitude; //经度 

      alert('纬度:'+lat+',经度:'+lag); 

       
       利用百度地图和谷歌地图接口获取用户地址

     

      上面我们了解了HTML5的Geolocation可以获取用户的经纬度,那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口,我们只需要将HTML5获取到的经纬度信息传给地图接口,则会返回用户所在的地理位置,包括省市区信息,甚至有街道、门牌号等详细的地理位置信息。

      我们首先在页面定义要展示地理位置的div,分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互,我们将经纬度信息通过Ajax方式发送给百度地图接口,接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据,我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库,需要先加载jQuery库文件。

      

      

    function showPosition(position){ 

      var latlon = position.coords.latitude+','+position.coords.longitude; 

     

      //baidu

      var url = "<a href="http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0">http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0</a>"; 

      $.ajax({ 

        type: "GET"

        dataType: "jsonp"

        url: url, 

          beforeSend: function(){ 

            $("#baidu_geo").html('正在定位...'); 

          }, 

          success: function (json) { 

            if(json.status==0){ 

              $("#baidu_geo").html(json.result.formatted_address); 

            

          }, 

          error: function (XMLHttpRequest, textStatus, errorThrown) { 

            $("#baidu_geo").html(latlon+"地址位置获取失败"); 

        

      }); 

    }); 


      再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口,接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据,这些JSON数据比百度地图接口返回的要更详细,我们可以根据需求将需要的信息展示给div#google_geo。

        

    function showPosition(position){ 

      var latlon = position.coords.latitude+','+position.coords.longitude; 

     

      //google 

      var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'

      $.ajax({ 

        type: "GET"

        url: url, 

        beforeSend: function(){ 

          $("#google_geo").html('正在定位...'); 

        }, 

        success: function (json) { 

          if(json.status=='OK'){ 

          var results = json.results; 

            $.each(results,function(index,array){ 

              if(index==0){ 

                $("#google_geo").html(array['formatted_address']); 

              

            }); 

          

        }, 

        error: function (XMLHttpRequest, textStatus, errorThrown) { 

          $("#google_geo").html(latlon+"地址位置获取失败"); 

        

      }); 

    }

     

     

    以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中,我们可以根据实际情况进行调用。

    展开全文
  • 微信小程序获取地理位置信息

    千次阅读 2018-09-12 11:23:47
    微信小程序官方文档提供了 wx.getlocation 方法来获取用户的地理位置信息,但是这个方法只能获取到用户的经度和纬度,具体城市名称还需要结合第三方地图(如腾讯地图、百度地图、高德地图等)来获取。 这里就先总结...

    微信小程序官方文档提供了 wx.getlocation 方法来获取用户的地理位置信息,但是这个方法只能获取到用户的经度和纬度,具体城市名称还需要结合第三方地图(如腾讯地图、百度地图、高德地图等)来获取。

    这里就先总结一下微信小程序wx.getlocaltion方法+腾旭地图接口来获取位置信息的方法。

    获取位置大概分以下几步:
    1.使用小程序官方提供的 wx.getlocation 方法获取到用户所处位置的经度和纬度。
    2.调用腾讯地图的 reverseGeocoder 方法获取到具体的位置信息。
    (腾讯地图获取位置信息文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html
    在使用腾讯地图的时候需要做一些准备工作。

    • 首先要申请一个腾讯地图的key,申请地址:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key
    • 在小程序后台配置合法域名。在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com。
    • 申请好key之后,要下载腾讯地图的api,下载地址:https://lbs.qq.com/qqmap_wx_jssdk/index.html
      下载解压之后,会有两个文件,考虑到小程序对代码量有一定的限制,推荐使用压缩之后的文件。
    • 解压之后在小程序中新建一个libs的目录,将文件放在此目录下,并在*.js中引用该文件。
      这里写图片描述

    到这里,所有的准备工作都已完成,就可以获取地理位置信息了。

    // pages/farm/farm.js
    // 引入SDK核心类
    var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
    var qqmapsdk;
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        region: [],  //地理位置信息
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        // 实例化API核心类  获取位置信息
        qqmapsdk = new QQMapWX({
          key: 'DR2BZ-NA7EI-7GSG6-5X4PS-FW6PJ-HZBB3'
        });
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        var that=this;
        // 获取位置信息
        wx.getLocation({
          type:'wgs84',
          success: function(res) {
            qqmapsdk.reverseGeocoder({
              location: {
                latitude: res.latitude,
                longitude: res.longitude
              },
              success: function (result) {
                var province = result.result.address_component.province;
                var city = result.result.address_component.city;
                that.setData({
                  region: [province, city]
                })
              }
            });
          },
        })
      },
    })
    
    展开全文
  • HTML5实现获取地理位置信息并定位功能 注:请点击此处进行充电! 前言  这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理位置信息并定位的方法,...

    HTML5实现获取地理位置信息并定位功能

    前言

         这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理位置信息并定位的方法,需要的朋友可以参考下

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

    如何使用HTML5地理位置定位功能

          定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,所以我们在访问该应用时会提示是否允许地理定位,我们当然选择允许即可。

    [javascript] view plain copy
     print?
    1. function getLocation(){   
    2. if (navigator.geolocation){   
    3. navigator.geolocation.getCurrentPosition(showPosition,showError);   
    4. }else{   
    5. alert("浏览器不支持地理定位。");   
    6. }   
    7. }  

          从上面的代码可以知道,如果用户设备支持地理定位,则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象,getCurrentPosition() 方法的第二个参数showError用于处理错误,它规定当获取用户位置失败时运行的函数。

          我们先来看函数showError(),它规定获取用户地理位置失败时的一些错误代码处理方式:

    [javascript] view plain copy
     print?
    1. function showError(error){   
    2. switch(error.code) {   
    3. case error.PERMISSION_DENIED:   
    4. alert("定位失败,用户拒绝请求地理定位");   
    5. break;   
    6. case error.POSITION_UNAVAILABLE:   
    7. alert("定位失败,位置信息是不可用");   
    8. break;   
    9. case error.TIMEOUT:   
    10. alert("定位失败,请求获取用户位置超时");   
    11. break;   
    12. case error.UNKNOWN_ERROR:   
    13. alert("定位失败,定位系统失效");   
    14. break;   
    15. }   
    16. }  

    我们再来看函数showPosition(),调用coordslatitudelongitude即可获取到用户的纬度和经度。

    [javascript] view plain copy
     print?
    1. function showPosition(position){   
    2. var lat = position.coords.latitude; //纬度   
    3. var lag = position.coords.longitude; //经度   
    4. alert('纬度:'+lat+',经度:'+lag);   
    5. }  

    利用百度地图和谷歌地图接口获取用户地址

          上面我们了解了HTML5Geolocation可以获取用户的经纬度,那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口,我们只需要将HTML5获取到的经纬度信息传给地图接口,则会返回用户所在的地理位置,包括省市区信息,甚至有街道、门牌号等详细的地理位置信息。

          我们首先在页面定义要展示地理位置的元素,分别定义id#baidu_geoid#google_geo。我们只需修改关键函数showPosition()

      先来看百度地图接口交互,我们将经纬度信息通过Ajax方式发送给百度地图接口,接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据,我们可以根据需求将需要的信息展示给#baidu_geo。注意这里用到了jQuery库,需要先加载jQuery库文件。

    [javascript] view plain copy
     print?
    1.  function showPosition(position){   
    2. var latlon = position.coords.latitude+','+position.coords.longitude;   
    3. //baidu   
    4. var url = "  
    5. <ahref="http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0</a>";   
    6. $.ajax({   
    7. type: "GET",   
    8. dataType: "jsonp",   
    9. url: url,   
    10. beforeSend: function(){   
    11. $("#baidu_geo").html('正在定位...');   
    12. },   
    13. success: function (json) {   
    14. if(json.status==0){   
    15. $("#baidu_geo").html(json.result.formatted_address);   
    16. }   
    17. },   
    18. error: function (XMLHttpRequest, textStatus, errorThrown) {   
    19. $("#baidu_geo").html(latlon+"地址位置获取失败");   
    20. }   
    21. });   
    22. });  

          再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口,接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据,这些JSON数据比百度地图接口返回的要更详细,我们可以根据需求将需要的信息展示给#google_geo

    [javascript] view plain copy
     print?
    1. function showPosition(position){   
    2. var latlon = position.coords.latitude+','+position.coords.longitude;   
    3. //google   
    4. var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN';   
    5. $.ajax({   
    6. type: "GET",   
    7. url: url,   
    8. beforeSend: function(){   
    9. $("#google_geo").html('正在定位...');   
    10. },   
    11. success: function (json) {   
    12. if(json.status=='OK'){   
    13. var results = json.results;   
    14. $.each(results,function(index,array){   
    15. if(index==0){   
    16. $("#google_geo").html(array['formatted_address']);   
    17. }   
    18. });   
    19. }   
    20. },   
    21. error: function (XMLHttpRequest, textStatus, errorThrown) {   
    22. $("#google_geo").html(latlon+"地址位置获取失败");   
    23. }   
    24. });   
    展开全文
  • Html5 Geolocation获取地理位置信息

    千次阅读 2012-11-12 14:53:34
    获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。 Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是...
  • HTML5-geolocation IP 获取地理位置信息
  • html5中获取地理位置信息

    千次阅读 2016-08-13 11:30:17
    本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图等接口来获取用户准确的地理位置信息。  定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,...
  • 本文所介绍的获取地理位置信息的Flutter插件是基于高德地图的,所以前期需要针对高德平台做一些准备工作。 1. 申请高德地图的KEY 1. Android版本申请 参考:...
  • ReactNative 获取地理位置信息

    千次阅读 2017-11-07 16:53:39
    ReactNative 提供了一个定位API: Geolocation 用来获取设备所在的地理位置.定位API遵循web标准。iOS 你需要在Info.plist中增加NSLocationWhenInUseUsageDescription字段来启用定位功能。如果你使用react-native ...
  • 通过经纬度获取地理位置信息

    千次阅读 2017-11-17 17:06:14
    最近做一个车载设备app,设备获取北斗gps数据上传的到后台,app通过后台...获取地理位置url//Google public String getGoogleUrl(boolean isCn, String longitude,String latitude) { if (!isCn) { return "http://m
  • 公众号需要定位当前用户的地址位置,需要通过签名后返回的数据,前端将参数回调到微信服务器获取地理位置信息,官方文档说明(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)。...
  • 通过IP地址获取地理位置信息

    千次阅读 2013-07-08 17:48:47
    本方法通过淘宝的一个开源服务实现的,代码如下:#通过IP地址获取地理位置信息 $ip = $_SERVER['REMOTE_ADDR']; echo 'ip:' . $ip; $url = "http://ip.taobao.com/service/getIpInfo.php?ip={$ip}"; $ip = json_...
  • 本文将使用bc20模块获取地理位置信息并向电信云平台上报数据 1.安装电脑驱动 下载并安装 USB-UART 芯片驱动,驱动下载地址为:...
  • 利用com.maxmind.db根据ip地址获取地理位置信息1 添加Maven依赖 <groupId>com.maxmind.db</groupId> <artifactId>maxmind-db <version>1.0.0 </dependency>2 用法2.1 简单示例File database =
  • 我用uiwebview加载一个jsp页面,jsp页面中有通过geolocation请求地理位置,我在iOS手机上应该加什么才能让jsp页面能够获取地理位置

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,264
精华内容 24,105
关键字:

如何获取地理位置信息