精华内容
下载资源
问答
  • 2019-07-18 22:22:20
    // pages/list/list.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        nation: '',
        province: '',
        city: '',
        district: '',
        street: ''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.getAddressDetail();
      },
    
      /**
         * 获取地理位置信息详情
         */
      getAddressDetail: function () {
        let that = this;
        wx.getLocation({
          type: 'wgs84',// 参考系
          success: function (res) {
            var latitude = res.latitude;
            var longitude = res.longitude;
            console.log("纬度=" + latitude + " 经度=" + longitude);
    
            // 构建请求地址
            var qqMapApi = 'http://apis.map.qq.com/ws/geocoder/v1/' + "?location=" + latitude + ',' +
              longitude + "&key=" + 'XVLBZ-BSU66-ULJSQ-MFGXD-TM7GZ-55F2M' + "&get_poi=1";
    
            that.sendRequest(qqMapApi);
    
    更多相关内容
  • 主要介绍了Html5 Geolocation获取地理位置信息实例,具有一定的参考价值,有兴趣的同学可以了解一下。
  • HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图接口来获取用户准确的地理位置...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。1.地理位置信息得运用获取用户地理位置信息,在各大网站...

    欢迎点击「算法与编程之美」↑关注我们!

    本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

    1.地理位置信息得运用

    获取用户地理位置信息,在各大网站、app中,例如淘宝,美团等购物平台已经是很常见的了。一些常见的旅游app,地图查询软件也都普遍的提供了位置定位等功能。常见的获取地理位置信息的办法是通过h5提供的地理位置功能(Geolocation API)。

    2.Geolocation API

    地理位置功能(Geolocation API),能确定用户位置。Geolocation API存在于navigator对象中,只包含3个方法:当前位置(getCurrentPosition)、监视位置(watchPosition)、清除监视(clearWatch)。

    其中当前位置(getCurrentPosition)有三个参数:success,error,option。success是成功获取位置信息的回调函数,它是方法唯一必须的参数。error是用于捕获获取位置信息出错的情况。option是配置项,具有如下参数对象:

    enableHighAccuracy:指示获取位置的精确度,默认为false。如果设置为true,使用精确定位(卫星定位/GPS)。timeout:获取位置的最长等待时间,默认不限时间。maximumAge:接受不超过指定时间毫秒的缓存位置,也就是在重复获取位置时,多长时间之后再次获取位置。

    如下就可以获取相应的地理位置:(获取地理位置的等待时间比较长,要耐心等待。由于在运行时就比较心急,一直没等到运行结果出现。误以为是代码错误,改了很久,发现并没有问题,只是运行时间比较长。)

    function getLocation(){

                   var options={

                       enableHighAccuracy:true, //精确定位

                       maximumAge:1000//最长时间

                   }

                   if(navigator.geolocation){

                       //浏览器支持geolocation                    navigator.geolocation.getCurrentPosition(onSuccess,onError,options);                 

                   }else{

                      console.log('你的浏览器不支持地理定位'); //浏览器不支持geolocation

                   }           }

    3.完成过程

    (1)首先在页面定义要展示地理位置的div,并设置id。(在调用地图的时候会用到id名)设置相应的样式。

    <div id=“weizhi” style="width:2000px;height:1000px"></div>

    (2)利用js,获取相应的地理位置,这一步在文章第二部分已经介绍了,就不再赘述了。

    (3)获取用户位置的经纬度

    function onSuccess(position){

                   //经纬度

               var longitude =position.coords.longitude;

                   var latitude = position.coords.latitude;

    }

    (4)获取到了位置的经纬度,其实就成功了一半。要想位置在地图上显示出来,就需要调用地图。Geolocation可以获取用户的经纬度,那么需要做的是把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。这里就需要调用百度地图的接口,再将获取到的经纬度信息传给地图接口,就可以返回用户所在的地理位置。(如果调用百度地图,最好使用IE浏览器运行,谷歌浏览器可能显示不出来)

    function onSuccess(position){

    var map =new BMap.Map("weizhi");

                   //创建一个坐标

                   var point =new BMap.Point(longitude,latitude);

                   //地图初始化,设置中心点坐标和地图级别 

                   map.centerAndZoom(point,15);

    }

    (5)如下就是位置获取的结果:

                                                 图3.1 效果图

    如下就是位置获取的完整代码:

      function  getLocation(){

                   var options={

                       enableHighAccuracy:true, //精确定位

                       maximumAge:1000//最长时间

                   }

                   if(navigator.geolocation){

                       //浏览器支持geolocation

                       navigator.geolocation.getCurrentPosition(onSuccess,onError,options);   

                   }else{

                       console.log('你的浏览器不支持地理定位');//浏览器不支持geolocation

                   }

                }

                //成功时

                function onSuccess(position){

                   //经度

                   var longitude =position.coords.longitude;

                   //纬度

                   var latitude = position.coords.latitude;

                   //创建地图实例 

                   var map =new BMap.Map("container");

                   //创建一个坐标

                   var point =new BMap.Point(longitude,latitude);

                   //地图初始化,设置中心点坐标和地图级别 

                   map.centerAndZoom(point,15);

                }

                //失败时

                function onError(error){

                   switch(error.code){

                       case 1:

                       alert("位置服务被拒绝");

                       break;

     

                       case 2:

                       alert("暂时获取不到位置信息");

                       break;

                   }

                }

                window.οnlοad=getLocation;

     

    END

    编  辑   |   王楠岚

    责  编   |   刘   连

     where2go 团队


       

    微信号:算法与编程之美          

    长按识别二维码关注我们!

    温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

    展开全文
  • HTML5中通过js获取地理位置信息

    千次阅读 2020-05-11 09:26:00
    HTML5通过MUI框架做的定位打卡功能,怎样获得地理位置呢?参考了好多博客大部分使用的是百度或者高德的地图接口。我也仿照着写了一个。 正文 先上张图看可能界面吧 这个界面是HBuilder通过运行到手机的界面,浏览器...

    前言

    HTML5通过MUI框架做的定位打卡功能,怎样获得地理位置呢?参考了好多博客大部分使用的是百度或者高德的地图接口。我也仿照着写了一个。

    正文

    先上张图看可能界面吧
    在这里插入图片描述
    这个界面是HBuilder通过运行到手机的界面,浏览器中的界面是这个样子的
    在这里插入图片描述
    HTML的主要代码

    <div class="mui-input-row" style="height: 55px;">
    					<div style="width: 80px;">
    						<label style="width: 75px;padding: 13px 1px 11px 15px;"> <span class="mui-icon mui-icon-location-filled" style="font-size: medium;"></span>地点:</label>
    					</div>
    					<div style="width: 80%;padding: 10px 1px 11px 20px;position: relative;margin-left: 60px;" id="addr">
    						位置获取中...
    					</div>
    				</div>
    

    js中的主要代码

    
    function Location() {};
    
    Location.prototype.getLocation = function(callback) {
    	var options = {
    		enableHighAccuracy: true,
    		maximumAge: 1000
    	};
    	this.callback = Object.prototype.toString.call(callback) == "[object Function]" ?
    		callback :
    		function(address) {
    			alert(address.province + address.city);
    			console.log("getocation(callbackFunction) 可获得定位信息对象");
    		};
    	var self = this;
    	if (navigator.geolocation) {
    		//浏览器支持geolocation
    		navigator.geolocation.getCurrentPosition(function(position) {
    			//经度
    			var longitude = position.coords.longitude;
    			//纬度
    			var latitude = position.coords.latitude;
    			self.loadMapApi(longitude, latitude);
    		}, self.onError, options);
    	} else {
    		//浏览器不支持geolocation
    	}
    };
    
    Location.prototype.loadMapApi = function(longitude, latitude) {
    	var self = this;
    	var oHead = document.getElementsByTagName('HEAD').item(0);
    	var oScript = document.createElement("script");
    	oScript.type = "text/javascript";
    	oScript.src =
    		"http://api.map.baidu.com/getscript?v=2.0&ak=A396783ee700cfdb9ba1df281ce36862&services=&t=20140930184510";
    	oHead.appendChild(oScript);
    	oScript.onload = function(date) {
    		var point = new BMap.Point(longitude, latitude);
    		var gc = new BMap.Geocoder();
    		gc.getLocation(point, function(rs) {
    			var addComp = rs.addressComponents;
    			self.callback(addComp);
    		});
    	}
    };
    
    Location.prototype.onError = function(error) {
    	switch (error.code) {
    		case 1:
    			alert("位置服务被拒绝");
    			break;
    		case 2:
    			alert("暂时获取不到位置信息");
    			break;
    		case 3:
    			alert("获取信息超时");
    			break;
    		case 4:
    			alert("未知错误");
    			break;
    	}
    };
    
    //调用
    var local = new Location();
    local.getLocation(function(res) {
    	//此处就是返回的地理位置信息
    	console.log(res);
    	//JSON.stringify(res),把返回的对象转为字符串了,自己根据需求截取下就好
    	var resstr = JSON.stringify(res);
    	// alert(res.province+res.city+res.district+res.street+res.streetNumber);
    	document.getElementById("addr").innerText = res.province+res.city+res.district+res.street+res.streetNumber;
    });
    
    

    然后就开始调试就好了配合蜂鸟助手更好用。

    结束

    PS:蜂鸟助手是一款模拟软件,有兴趣的朋友可以下载玩一玩。

    展开全文
  • html5中获取地理位置信息

    千次阅读 2016-08-13 11:30:17
    本文结合实例给大家分享如何使用HTML5,借助百度、谷歌地图等接口来获取用户准确的地理位置信息。  定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,...

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

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

            这些位置信息是从何而来的呢?ip地址,GPS全球定位,wifi无线网络,基站,所以如果通过ip去定位的话,可能这个位置信息就不是那么准确,因为可能获取的位置信息是ip提供商的位置。所以,现在移动端手机一般获取到的位置信息都是基于GPS全球定位系统,也就是卫星定位,这个准确度很高。大家地理应该都学过,我们获取某处的位置一般是根据经度(南北极的连接线)和纬度(东西连接的线)的交叉线来获取的。

           接下来我们一起来了解获取地理位置信息的API,这个对象是:

    <span style="font-size:18px;">navigator.geolocation</span>
    这个对象底下有单次定位请求的方法和多次定位请求的方法。我们先看一下单次定位请求的方法:
    <span style="font-size:18px;">getCurrentPosition(请求成功,请求失败,数据手机方式)</span>

    这个方法里面有三个参数,其中第一个请求参数是请求成功的回调函数,这个成功的回调函数里面可以获得很多的位置属性,如下:
    »经度coords.longitude
    »纬度coords.latitude
    »海拔coords.altitude
    »海拔准确度coords.altitudeAcuracy
    »行进方向coords.heading
    »地面速度coords.speed
    »时间戳: new Date(position.timestamp)

    第二个请求参数是请求失败的回调参数,请求失败有很多因素,回调参数里有个code属性就分别表示失败的原因:
    »失败编号  code
    » 不包括其他错误编号中的错误
    » 用户拒绝浏览器获取位置信息
    » 尝试获取用户信息,但失败了
    »:   设置了timeout值,获取位置超时了

    第三个参数表示的是数据的一个收集,这是JSON格式的,分别有以下形式:
    »enableHighAcuracy 更精确的查找,默认false
    »timeout  获取位置允许最长时间,默认infinity
    »maximumAge位置可以缓存的最大时间,默认0

    具体的举个例子如下:

    <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    div{width:400px;height:400px;border:1px solid black;}
    </style>
    <script>
    window.onload = function(){
    	var oInput = document.getElementById('in1');
    	var oDiv = document.getElementById('box1');
    	
    	oInput.onclick = function(){
    	
    		window.navigator.geolocation.getCurrentPosition(function(position){
    			var longitude = position.coords.longitude;
    			var latitude =  position.coords.latitude;
    			var altitude = position.coords.altitude;
    			var altitudeAcuracy = position.coords.altitudeAcuracy;
    			var heading = position.coords.heading;
    			var speed = position.coords.speed;
    			var data = new Date(position.timestamp);
    			
    			oDiv.innerHTML = '经度:'+longitude+'/n纬度:'+latitude+'/n海拔'+altitude+"altitudeAcuracy"+altitudeAcuracy+"/n行走方向"+heading+'/n地面速度'+speed+'/n时间戳'+data;
    		},function(err){
    			alert(err.code);
    		},{
    			timeoenableHighAcuracy:false,
    			timeout : 5000,
    			maximumAge :5	
    		});
    			
    	};	
    };
    </script>
    </head>
    
    <body>
    <input type='button' value='获取地理位置信息' id='in1' />
    <div id='box1'> </div>
    </body>
    </html>
    </span>

    接下来我们再看一下多次定位请求的方法:

    <span style="font-size:18px;"> watchPosition(像setInterval)
    </span>

    »移动设备有用,位置改变才会触发
    »配置参数:frequency 更新的频率

    关闭更新请求 
    :
    <span style="font-size:18px;"> clearWatch(像clearInterval)</span>

    我们直接来看一个例子:

    <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script>
    
    //LBS : 基于地图信息的应用
    
    window.onload = function(){
    	var oInput = document.getElementById('input1');
    	var oT = document.getElementById('t1');
    	
    	var timer = null;
    	
    	oInput.onclick = function(){
    		
    		timer = navigator.geolocation.watchPosition(function(position){
    			
    			oT.value += '经度:' + position.coords.longitude+'\n';
    			oT.value += '纬度 :' + position.coords.latitude+'\n';
    			oT.value += '准确度 :' + position.coords.accuracy+'\n';
    			oT.value += '海拔 :' + position.coords.altitude+'\n';
    			oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
    			oT.value += '行进方向 :' + position.coords.heading+'\n';
    			oT.value += '地面速度 :' + position.coords.speed+'\n';
    			oT.value += '时间戳:' + new Date(position.timestamp)+'\n';
    				
    			
    		},function(err){
    			
    			//err.code // 失败所对应的编号
    			
    			alert( err.code );
    			
    			navigator.geolocation.clearWatch(timer);
    			
    		},{
    			enableHighAcuracy : true,
    			timeout : 5000,
    			maximumAge : 5000,
    			frequency : 1000
    		});
    		
    	};
    	
    };
    
    </script>
    </head>
    
    <body>
    <input type="button" value="请求" id="input1" /><br />
    <textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
    </textarea>
    </body>
    </html>
    </span>
    最后,我们来看一下连接百度地图接口,做一个百度地图应用:

    <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #div1{ width:400px; height:400px; border:1px #000 solid;}
    </style>
    <script src="http://api.map.baidu.com/api?v=1.3"></script>
    <script>
    
    window.onload = function(){
    	var oInput = document.getElementById('input1');
    	
    	oInput.onclick = function(){
    		
    		navigator.geolocation.getCurrentPosition(function(position){
    			
    			var y = position.coords.longitude;
    			var x = position.coords.latitude;
    			
    			var map = new BMap.Map("div1");
    			
    			var pt = new BMap.Point(y, x);
    			
    			map.centerAndZoom(pt, 14);
    			map.enableScrollWheelZoom();
    			var myIcon = new BMap.Icon("miaov.png", new BMap.Size(30,30));
    			var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
    			map.addOverlay(marker2); 
    			
    			var opts = {
    			  width : 200,     // 信息窗口宽度
    			  height: 60,     // 信息窗口高度
    			  title : "北京航空航天大学"  // 信息窗口标题
    			}
    			var infoWindow = new BMap.InfoWindow("软件学院", opts);  // 创建信息窗口对象
    			map.openInfoWindow(infoWindow,pt); //开启信息窗口
    			
    			
    		});
    		
    	};
    	
    };
    
    </script>
    </head>
    
    <body>
    <input type="button" value="请求" id="input1" />
    <div id="div1"></div>
    </body>
    </html>
    </span>


          

    展开全文
  • 本文所介绍的获取地理位置信息的Flutter插件是基于高德地图的,所以前期需要针对高德平台做一些准备工作。 1. 申请高德地图的KEY 1. Android版本申请 参考:...
  • html5实现获取地理位置信息并定位

    千次阅读 2019-05-05 11:39:39
    function getLocation(){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,showError); }else{ ...//获取用户地理位置失败时的一些错误代码处理方式 fu...
  • html5获取地理位置信息4种方式详解

    万次阅读 2017-12-28 20:31:36
    HTML5怎样获取地理信息,如html5怎样获取ip地址,怎样实现gps导航定位,wifi基站的mac地址服务等,这些在HTML5中已经都已经有API实现了,用户可以轻松使用html5技术进行操作,下面详细为大家介绍HTML5操作地理信息。...
  • 主要为大家详细介绍了Java微信公众平台之获取地理位置的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Android如何获取手机的地理位置

    热门讨论 2014-11-14 10:51:31
    Android如何获取手机的地理位置,可靠,绝对可靠!
  • Android 获取当前地理位置信息

    千次阅读 2019-07-25 17:20:20
    Android 获取当前地理位置信息 在项目当中经常需要获取当前所在的地理位置信息,但只是单个地位,并不需要地图、周边检索、路线等其他额外的功能, 所以我们如果引入第三方sdk就感觉很笨重,并且有些得不尝试。 在...
  • 公众号需要定位当前用户的地址位置,需要通过签名后返回的数据,前端将参数回调到微信服务器获取地理位置信息,官方文档说明(https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)。...
  • 通过IP地址获取地理位置信息

    千次阅读 2019-01-21 14:21:07
    这里我用的阿里淘宝的接口 http://ip.taobao.com/service/getIpInfo.php?ip=218.201.8.37(已失效... } } } 运行结果: 欢迎访问本文的个人博客链接: https://br-bai.github.io/2019/01/21/通过IP地址获取地理位置信息/
  • H5端获取地理位置信息 一、app端 1.在需要使用的页面中 onShow(){ //#ifdef APP-PLUS // 获取定位信息 this.getLocations(); //#endif }, methods:{ //获取定位信息 getPosition(){ const that = this; uni...
  • Google Map API获取地理位置信息 根据地点获取经纬度坐标 处理Google MAP返回的多个数据。
  • 主要介绍了微信获取用户地理位置信息的原理与步骤的相关资料,需要的朋友可以参考下
  • 根据经纬度获取地址信息-百度地图API 经度: 纬度: 提交
  • 从google的json接口获取地理位置信息的Java代码 Android开发技巧整理
  • 这篇文章主要介绍了微信小程序获取地理位置及经纬度授权代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 微信小程序获取地理位置授权,首先需要在app....
  • 由于小程序只提供了我们一个获取地理位置、速度的api,并没有获取的相关地位位置的信息等,我们利用百度地图的api来获取地位位置。 (此图片来源于网络,如有侵权,请联系删除! ) 文档  1.申请ak  ...
  • res.speed const accuracy = res.accuracy that.getLocation() // 再次调用获取位置弹框 } }) } }, js文件(获取位置弹框) getLocation() { const that = this // 获取位置信息弹窗 wx....
  • 获取访客信息的类:语言、浏览器、操作系统、IP、地理位置、ISP。
  • php /** * 获取访客信息的类:语言、浏览器、操作系统、ip、地理位置、isp。 * 使用: * $obj = new guest_info; * $obj->getlang(); //获取访客语言:简体中文、繁體中文、english。 * $obj->getbrowser(); /...
  • 本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html> <html> <body> <p id=demo>Click the button to get your ...
  • if(navigator.geolocation){ //如果浏览器支持获取地理信息 navigator.geolocation.getCurrentPosition(successCallback,errorCallback); }else{ console.log("您的浏览器不支持地理定位"); } function ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 68,793
精华内容 27,517
关键字:

如何获取地理位置信息