腾讯地图定位及坐标解析
一个项目,需要打开地图后点击获取地址
用的腾讯地图开放平台,对着文档花了一上午弄出来了
代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>前端定位模块</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <style> #pos-area{ height:500px; width: 100%; } #poi_lat{color:red;} #poi_lng{color:green;} #poi_address{color:blue;} </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script> <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script> </head> <body> <h1>腾讯地图测试</h1> <div>您在当的位置(经度:<span id="now_lat"></span>,纬度:<span id="now_lng"></span>)<button type="button" onclick="geolocation.getLocation(showPosition, showErr, options)">获取当前位置</button></div> <div>您点击的位置(经度:<span id="poi_lat"></span>,纬度:<span id="poi_lng"></span>,解析出来的地址:<span id="poi_address"></span>)</div> <div id="pos-area"> </div> <script type="text/JavaScript"> var appkey ="A4KBZ-LUZE3-VPW3T-YGU5N-SIT2S-5ZFVH"; var geolocation = new qq.maps.Geolocation(appkey, "myapp"); var options = {timeout: 8000}; $(function(){ //加载完成后就取当前位置 geolocation.getLocation(showPosition, showErr, options); }) function showPosition(position) { console.log(position); $('#now_lat').html(position.lat); $('#now_lng').html(position.lng); $('#poi_lat').html(position.lat); $('#poi_lng').html(position.lng); //取出位置坐标了,设置地图显示出来 var map = new qq.maps.Map(document.getElementById("pos-area"), { // 地图的中心地理坐标。 center: new qq.maps.LatLng(position.lat,position.lng), zoom:15 }); //添加标记 var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(position.lat,position.lng), map: map }); //解析地址 jiexiaddress(position.lat,position.lng); //绑定地图点击事件 qq.maps.event.addListener(map, "click", function (e) { $('#poi_lat').html(e.latLng.getLat().toFixed(6)); $('#poi_lng').html(e.latLng.getLng().toFixed(6)); //先移除标记,再添加标记 marker.setMap(null); marker = new qq.maps.Marker({ position: new qq.maps.LatLng(e.latLng.getLat(),e.latLng.getLng()), map: map }); jiexiaddress(e.latLng.getLat(),e.latLng.getLng()); }); }; function showErr() { alert("定位失败!"); }; //解析地址 function jiexiaddress(lat,lng){ var url3 = encodeURI("https://apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key="+appkey+"&output=jsonp&&callback=?"); $.getJSON(url3, function (result) { if(result.result!=undefined){ $('#poi_address').html(result.result.address); }else{ $('#poi_address').html(''); } }) } </script> </body> </html>效果图:
备注:微信里打的话需要用https地址才能取得权限,在手机浏览器打开就可以不用了,还有记得在腾讯控制台那里把webserviceapi打开并加上域名
预览地址:https://www.niunan.net/qqmapdemo.html
相关推荐
js腾讯地图api获取坐标定位地理位置_soso地图api获取坐标 js腾讯地图api获取坐标定位地理位置_soso地图api获取坐标
js腾讯地图api获取坐标位置是一款soso地图api获取坐标定位地理位置特效。
腾讯地图api和layui结合实现的腾讯地图坐标拾取器 可回调选择结果 layui.config({ base: './' }).use(["addrHelper"], function() { const addrHelper = layui.addrHelper const layer = layui.layer // 打开坐标...
腾讯地图定位
利用腾讯地图,精简了代码,实现了返回wgs84坐标,代码不多
腾讯地图WebService地址解析接口实现源码,可以将微信用户日志的经纬度地址解析成行政区划省市县区的地址。
腾讯地图定位2个demo(1.一个标记点,地图可点击。2.多个标记点,标记点可以点击并显示信息)。替换自己的key可以正常运行
腾讯地图坐标拾取器demo腾讯地图坐标拾取器demo腾讯地图坐标拾取器demo腾讯地图坐标拾取器demo
uni-app腾讯地图显示定位
bootdo开发框架下整合腾讯地图实例demo;本demo中包括区域地址选择,并填写详细地址后获取当前地址坐标,也可手动修改坐标值根据地图现在可在地图中点击获取坐标值。 注意:本demo基于bootdo 2.0 框架下进行的二次...
我的位置-安卓APP原代码,是按教程(但教程是用谷歌地图,现在用不了。...本软件,只是用了手机的GPS的调用取得坐标,再通过微调数字,在腾讯地图上显示正确的位置。显示也是通过HTTPS:网页方式获得。
php开发过程中,出现了前台用腾讯地图,但后台用的却是百度地图,这就需要做坐标转换
最新基于腾讯地图的坐标拾取器,可以模糊查询多个地点,可以点击地图拾取坐标,可以很方便的嵌入的自己的项目中,可惜CSDN上传不了效果图,总值绝对值得下载! 如果程序无法使用,则是key被限制IP,目前程序中用的...
6.腾讯地图与定位 1、开发背景 由于公司在开发安卓项目时,需要用到定位功能,所以需要选择定位精度高的地图SDK。现在将市面上应用最广泛的三家地图服务集成到一个APP上,实现百度地图、高德地图、腾讯地图的对比。...
腾讯地图GCJ02坐标与百度BD09坐标相互转换 GCJ02坐标系:即火星坐标系,WGS84坐标系经加密后的坐标系。 BD09坐标系:即百度坐标系,GCJ02坐标系经加密后的坐标系。
全国高校坐标(腾讯地图经纬度) .txt
高德腾讯百度坐标转换。
高德地图,百度地图,腾讯地图的显示,定位,poi搜索结果以tableView展示,集成webService中poi的接口
最新腾讯地图定位SDK,适合安卓,非常好用。