标签:
两种方式转换坐标,我使用微信获取的GPS坐标,直接放在百度地图中使用,发现标点的时候会与实际有较大的偏移。
index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="expires" content="0" /> <title>百度地图坐标变换</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FCGqW9Y44cb9lHiQsYRGzTsD"></script> <!-- 方式一坐标变换需要引入的文件 --> <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script> <script type="text/javascript" src="./jquery-2.2.0.min.js"></script> <script type="text/javascript" src="./index.js"></script> <style type="text/css"> *{ margin:0px; padding: 0px;} html{width: 100%;height: 100%;} body{ font-family: -apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; padding:20px 15px 15px 15px; font-size:12px; color:#3e3e3e; margin:0px auto; width: 100%;height: 100%; } .bmapCls{width: 100%;height:100%;border:1px red solid;} </style> </head> <body> <div id="bmapId" class="bmapCls"></div> </body> </html>
index.js
var lng = 106.487744; var lat = 29.569733; var map; $(function(){ map = new BMap.Map("bmapId"); // 创建地图实例 var gpsPoint = new BMap.Point(lng, lat); // 创建点坐标 console.log("gpsPoint:"+gpsPoint.lng+","+gpsPoint.lat); map.centerAndZoom(gpsPoint, 15); // 初始化地图,设置中心点坐标和地图级别 var markergps = new BMap.Marker(gpsPoint); var labelgps = new BMap.Label("我是GPS标注哦",{offset:new BMap.Size(20,-10)}); markergps.setLabel(labelgps); //添加GPS标注 map.addOverlay(markergps); //坐标转换完之后的回调函数 translateCallback = function (point){ var marker = new BMap.Marker(point); map.addOverlay(marker); var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); //添加百度label map.setCenter(point); console.log("转化为百度坐标为:"+point.lng + "," + point.lat); } // 方式一坐标变换 BMap.Convertor.translate(gpsPoint,0,translateCallback); // 方式二坐标变换 loadPosition(); // 结论:两种变换结果相同,每次都有很小的误差,属于正常现象 }); function loadPosition(){ // locateAddress 通过GPS的经纬度信息,得到对应的位置 $.ajax({ ‘url‘: ‘http://api.map.baidu.com/geoconv/v1/?coords=‘+lng+‘,‘+lat+‘&ak=FCGqW9Y44cb9lHiQsYRGzTsD&from=1&to=5&output=json&callback=renderReverse‘, ‘type‘:‘POST‘, ‘dataType‘:‘JSONP‘, ‘jsonp‘:‘jsoncallback‘, // 自动生成回调函数时的名称 ‘error‘:function(e){ // 不处理 }, ‘success‘:function(data){ // 不处理,由下面的回掉函数处理 } }); } function renderReverse(data){ console.log(data.result[0].x+‘,‘+data.result[0].y); var point = new BMap.Point(data.result[0].x,data.result[0].y); var marker = new BMap.Marker(point); map.addOverlay(marker); var label = new BMap.Label("我是百度2标注哦",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); //添加百度label map.setCenter(point); console.log("转化为百度坐标为:"+point.lng + "," + point.lat); }
标签:
原文地址:http://www.cnblogs.com/TheoryDance/p/5620155.html