使用高德定位API :
AMap.Map("iCenter")
AMap.CitySearch()
先在高德开放平台注册申请定位权限的key。 网站;高德开放平台
在需要定位的页面引入有定位key的script
基本引入展示
使用高德定位API
需求:苹果设备使用IP定位,其他使用gps定位
function getlocation() { var u = navigator.userAgent; var ua = navigator.userAgent.toLowerCase(); var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端 var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 //GPS定位 function locationForGPS() { /*********跟踪标记**********/ console.log("GPS定位开始+++"); var map, geolocation; //加载地图,调用浏览器定位服务 map = new AMap.Map("iCenter"); map.plugin("AMap.Geolocation", function() { geolocation = new AMap.Geolocation({ enableHighAccuracy: false,//是否使用高精度定位,默认:true timeout: 10000, //超过10秒后停止定位,默认:无穷大 }); map.addControl(geolocation); geolocation.getCurrentPosition(); //getCityInfo是高德GPS定位里面的一个方法,先返回ip定位数据,由于IP定位有可能不准确,所以后面用GPS数据修正 // geolocation.getCityInfo(function(status,result){ /*********跟踪标记**********/ console.log("与GPS同步IP定位开始,进行数据写入+++"); if (status === "complete" && result.info === "SUCCESS") { /*********跟踪标记**********/ console.log("同步IP定位成功,进行数据写入+++"); if(isNull(sessionStorage.getItem("autouserchooselocationct"))){ /*********跟踪标记**********/ console.log("未检测检查有上一次定位数据,进行数据写入+++"); let cityAdcode=result.adcode; let cityName=result.city; sessionStorage.setItem("autouserchooselocationct", cityName); sessionStorage.setItem("autouserchooselocationcode", cityAdcode); /*********跟踪标记**********/ console.log("同步IP定位结束,进行数据写入完成+++"); } } }); AMap.event.addListener(geolocation, "complete", onComplete);//返回定位信息 AMap.event.addListener(geolocation, "error", onError); //返回定位出错信息 }); //GPS定位成功 function onComplete(data) { console.log(data) /*********跟踪标记**********/ console.log("GPS定位启动+++"); //gsp定位精确到区,返回的adcode精确到了城市下属的区域, //想要获取城市的abcode还需要使用高德的另一个API,城市区域查询 let cityName=data.addressComponent.city; let geocoder = new AMap.Geocoder({}); //地理编码,返回地理编码结果, geocoder.getLocation(cityName, function(status, result) { if (status === "complete" && result.info === "OK") { /*********跟踪标记**********/ console.log("GPS定位成功,处理定位数据+++"); /*********跟踪标记**********/ console.log("进行数据写入,覆盖同步IP的数据+++"); let cityAdcode=result.geocodes[0].adcode; sessionStorage.setItem("autouserchooselocationct", cityName); sessionStorage.setItem("autouserchooselocationcode", cityAdcode); /*********跟踪标记**********/ console.log("GPS定位结束,进行数据写入完成+++"); } }); } //GPS定位失败 function onError() { /*********跟踪标记**********/ console.log("GPS定位失败开始启用ip定位+++"); locationForIp(true); /*********跟踪标记**********/ console.log("gps-ip++...") } } //IP定位 function locationForIp(tap) { /*********跟踪标记**********/if(tap){ console.log("GPS定位失败开始启用ip定位+++");} /*********跟踪标记**********/ console.log("ip定位开始+++"); var citysearch = new AMap.CitySearch(); //自动获取用户IP,返回当前城市 citysearch.getLocalCity(function (status, result) { if (status === "complete" && result.info === "OK") { if (result && result.city && result.bounds) { let GetUserLocation = result.city, GetUserLocationcode = result.adcode; /*********跟踪标记**********/console.log("ip定位成功,开始检查是否有上一次定位数据+++"); if(isNull(sessionStorage.getItem("autouserchooselocationct"))){ /*********跟踪标记**********/console.log("ip定位成功,未检测检查有上一次定位数据,进行数据写入+++"); sessionStorage.setItem("autouserchooselocationct", GetUserLocation); sessionStorage.setItem("autouserchooselocationcode", GetUserLocationcode); /*********跟踪标记**********/console.log("ip定位成功,进行数据写入结束+++"); } } } else { /*********跟踪标记**********/console.log("ip定位失败,进行数据写入结束+++"); } }) } if(isiOS){ /*********跟踪标记**********/console.log("ios设备启用IP定位"); locationForIp(false); }else { /*********跟踪标记**********/console.log("非ios设备启用GPS定位"); locationForGPS() } } };
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108102.html
摘要:广告开始最近做了表格数据转成图表展示的一个组件,地址如下整合地图的时候发现针对地级市的一些文件太多了,全部引入后有将近,所以就用了下高德老爷给的组件和接口,然后弄完在这记录一下虽然这种例子在社区里有很多这个组件文件放在了中,样式奇丑,请原谅 /——————广告开始——————/ 最近做了表格数据转成图表展示的一个react组件,地址如下: https://github.com/Lyla...
摘要:最近的项目中遇到了一个实时天气显示的问题通过高德地图的开放解决了将思路留下已经将它封装成了一个函数可以直接拿去使用不过使用前最好还是测试一下思路首先通过调用高德地图定位的获取的定位信息中有好像是高德的一组城市地理信息编号吧然后通过调用高德的 最近的项目中遇到了一个实时天气显示的问题.通过高德地图的开放 API 解决了;将思路留下. 已经将它封装成了一个函数. 可以直接拿去使用. 不过使...
正在进行NLP(自然语言处理)相关任务完成后,经常碰到务必辨别并获得省、大都市、行政区的需求。今天给大家介绍1个模块,你只需将结构体数组传递给这个模块,他就可以给你返回这个结构体数组内的省、市、区关键词,赶紧一起来了解一下 正在进行NLP(自然语言处理)相关任务完成后,经常碰到务必辨别并获得省、大都市、行政区的需求。虽然自身依据关键词表1个一个搜索也可以实现获得目的,但必须要先搜集省份关键词...
摘要:说起物联网,大家的第一反应就是智慧城市。在物联网的帮助下,得以让我们居住的城市正变得越来越有智慧。作为面向物联网的可视化开发平台有广阔的行业应用场景。 随着科技的发展,5G网络的到来,将开启万物即插即慧的新时代。这就是物联网,当网络不再是阻碍,万物互联,万物可视,把数字世界带入每个人、每个家庭、每个组织,构建万物互联的智能世界。 说起物联网,大家的第一反应就是智慧城市。在物联网的帮助下...
阅读 3261·2023-04-26 02:10
阅读 2881·2021-10-12 10:12
阅读 4565·2021-09-27 13:35
阅读 1522·2019-08-30 15:55
阅读 1059·2019-08-29 18:37
阅读 3424·2019-08-28 17:51
阅读 1955·2019-08-26 13:30
阅读 1192·2019-08-26 12:09