百度地图api

微信获取用户地理位置经纬度和百度获取实际地址的经纬度之间相差较大解决

前提了解：坐标系分类(经纬度)： WGS84美国GPS，国际通用，如谷歌国外地图、osm地图火星系GCJ-02国测局制定的标准，国内地图必须至少使用此对位置进行首次加密，高德地图、腾讯搜搜地图、阿里云地图、灵图51ditu地图、谷歌中国地图 BD-09百度在GCJ-02标准基础上进行二次加密，百度地图这两天一直在研究经纬度的问题，最后发现在微信上获取用户的地理位置(经纬度)和在百度上获取实际地址的经纬度之间的距离相差较大，整整相差了5000多米的距离，这到底是怎么回事呢？最后发现原来微信端获取的经纬度使用的是WGS84（大地坐标系），然而在百度上获取的经纬度使用的是百度自己定义的BD-09（百度坐标系），百度对外接口的坐标系并不是GPS采集的真实经纬度，所以导致了两个经纬度之间的差距过大，那么解决方式是什么呢？既然两个经纬度的坐标系标准不同，那么将其中一个坐标系的转换成另一个坐标系类型不久可以了吗？根据这个思路解决方法如下： GPS84转换为BD-09：在百度api中，提供了将WGS84（大地坐标系）和GCJ02（国测局坐标系）转化为BD-09（百度坐标系）的接口百度坐标转换api地址：http://lbsyun.baidu.com/index... 百度坐标转换接口地址如下： http://api.map.baidu.com/geoc... 参数说明： coords需转换的源坐标，多组坐标以“；”分隔,（经度，纬度） ak开发者密钥 from源坐标类型：1：GPS设备获取的角度坐标，WGS84坐标; 2：GPS获取的米制坐标、sogou地图所用坐标; 3：google地图、soso地图、aliyun地图、mapabc地图和amap地图所用坐标，国测局（GCJ02）坐标; 4：3中列表地图坐标对应的米制坐标; 5：百度地图采用的经纬度坐标; 6：百度地图采用的米制坐标; 7：mapbar地图坐标; 8：51地图坐标 to目标坐标类型：5：bd09ll(百度经纬度坐标);6：bd09mc(百度米制经纬度坐标) 根据如上就可以实现将我们微信端获取的经纬度转化成百度自己加密过后的经纬度当时如何将BD-09转换成GPS84百度没有提供接口，具体如何转换目前不清楚，有知道的，欢迎评论，谢谢

php-根据实际地址获取对应的经纬度

在php中根据实际地址获取对应的经纬度，这里推荐使用百度地图和腾讯地图提供的现成的接口这里注意一点：百度地图和腾讯地图的坐标与真实经纬度是不同的，国际经纬度坐标标准为WGS-84,国内必须至少使用国测局制定的GCJ-02,对地理位置进行首次加密，腾讯使用的就是国测局制定的GCJ-02。百度坐标在此基础上，进行了BD-09二次加密措施一：百度地图：根据实际地址获取经纬度的百度接口文档地址：地理编码 1：获取密钥点击文档左侧的获取密钥按钮，根据提示获取密钥 2：实现根据实际地址获取到经纬度 <?phpfunction curl($url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); //参数为1表示传输数据，为0表示直接输出显示。 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); //参数为0表示不带头文件，为1表示带头文件 curl_setopt($ch, CURLOPT_HEADER,0); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,false); $output = curl_exec($ch); curl_close($ch); return $output;}$data_info=curl("http://api.map.baidu.com/geocoder/v2/?address=实际地址&output=json&ak=你的密钥");$data_info = json_decode($data_info, true); //数据转换print_r($data_info);根据如上的代码就可以获取到实际地址对应的经纬度二：腾讯地图腾讯根据实际地址获取经纬度接口文档：https://lbs.qq.com/webservice... 1：获取密钥：申请密钥地址：https://lbs.qq.com/console/ke... 根据提示获取到所需的密钥 2：获取实际地址的经纬度接口：https://apis.map.qq.com/ws/ge... 代码实现和上面的相同，这里就不写出来了

百度地图开放平台使用总结

背景项目中用到百度地图组件，是要做一个店铺的商家地理位置页面，使用百度地图JavaScript API，在这里梳理一下大概过程。一、申请ak在百度地图开放平台控制台申请ak,获得商用授权。授权后就可以使用地图api了。二、代码中引入 <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=*******"></script>在引入时把ak当做参数写在src里。接下来就可以愉快使用各种api了。三、api使用下面我复制了一个文档上的例子，我的实际应用场景和这个例子差不多，现在HTML中引入map，然后创建一个地图挂载的DOM元素，命名好id,就可以根据业务场景选择合适的api使用啦，还是挺简单方便的。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";} #l-map{height:300px;width:100%;} #r-result{width:100%;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>本地搜索的结果面板</title> </head> <body> <div id="l-map"></div> <div id="r-result"></div> </body></html><script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("l-map"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch(map, { renderOptions: {map: map, panel: "r-result"} }); local.search("餐饮");</script>

微信公众号里面使用百度地图JavaScript-API-的一些记录

在这之前我们必须已经完成了微信JSSDK的配置如果还没有配置,请看这篇文章百度JavaScript API Lite JavaScript API标准版相比，Lite版专门针对移动端H5页面的使用场景，代码体积小，性能更好获取百度KEY1.注册成为百度开发者2.创建一个应用3.获取专属你的KEY 写一个简单的百度地图(JavaScript API Lite )1.在项目index.html 中引入百度JavaScript API Lite <script type="text/javascript" src="//api.map.baidu.com/api?ak=您的密钥&type=lite&v=1.0"></script>2.在需要用到百度地图的组件template中写入 <div id="baiduMap"></div> 3.在需要用到百度地图的组件script-mounted中写入 //创建一个地图实例let map = new BMap.Map("baiduMap"); //创建一个中心点坐标 let point = new BMap.Point(116.404, 39.915); //设置坐标 map.centerAndZoom(point, 15); 此时你就会看到一个简单的百度地图. 你也可以添加链接描述控件 //创建控件 let zoomCtrl = new BMap.ZoomControl(); //添加控件 map.addControl(zoomCtrl); map.addControl(scaleCtrl);JavaScript API Lite 只有一些简单的功能,不得不换JavaScript API v3.0... 使用JavaScript API v3.0百度地图API 3.0 与百度地图lite 使用方法类似,只不过引入的api文件不一样,百度JavaScript API 3.0 文档 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=obQ9ARXSYP3nswLNHABZopmrIyu2NcRC"></script>使用百度地图碰到的一些坑坑1:微信SDK getLocation获取的位置为gps 定位,需要手动转为百度的BD09坐标;//创建坐标 let point = new BMap.Point(longitude, latitude);//微信获取的坐标 let convertor = new BMap.Convertor();// 创建一个坐标转换的实例 let pointArr = [];//定义存放转换点数组每次最多10个 pointArr.push(point);//将转换点推入数组 //转换坐标 convertor.translate(pointArr, 1, 5, function (data) { //转换左边后的回调函数, map.centerAndZoom(data.points[0], 15); if(data.status === 0) { //添加三角坐标 let marker = new BMap.Marker(data.points[0]); map.addOverlay(marker); //添加标签 let label = new BMap.Label("你的位置",{offset:new BMap.Size(20,-10)}); marker.setLabel(label); //添加百度label } })坑2:地图安卓页面显示正常,IOS微信端无显示原因是ios已经要求在APP中的所有对外连接都要使用https，但是我们用的秘钥链接是使用的http因此我们将index.html 中的script 改一下 ...

百度地图，拖动地图，定位marker固定在屏幕中心位置

效果图：<!DOCTYPE html><html><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” /> <title>map</title> <script type=“text/javascript” src=“https://api.map.baidu.com/api?v=2.0&ak=你的api key”></script> <style type=“text/css”> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} .mapicon{ position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-100%); width: 52px; /* margin-top: -200px; / } </style></head><body><div id=“container”></div><img src=“icon-map.png” class=“mapicon” alt=""><script> /* * 主要通过地图的地理位置与像素转换实现效果 / var map = new BMap.Map(“container”); var point = new BMap.Point(116.404, 39.915); /* * Y轴偏移量，即地图可视区域中心点在Y轴的偏移量 * 当你的地图底部还有一些输入框的时候，可视区域集中在 * 手机的上部，增加偏移量能够将定位地点上移到可视区的 * 中间，这个量根据页面情况自行设定 * @type {number} */ var offsetY = 200; offsetY = 0 map.centerAndZoom(point, 15); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() === BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); //将地图中心移动到可视区中点 map.panTo(r.point); var centerPixel = map.pointToOverlayPixel(map.getCenter()); //通过设置地图的中心点，使定位点显示在手机上部分区域 map.setCenter(map.overlayPixelToPoint({x:centerPixel.x,y:centerPixel.y+offsetY})); map.addEventListener(‘dragend’,function(){ //获得移动之后地图中心点的像素位置 var pixel = map.pointToOverlayPixel(map.getCenter()); //获得定位图标所在位置在地图上的地理位置，实际上定位图标的像素位置就在地图中心像素位置相应的偏移量处 var Point = map.overlayPixelToPoint({x:pixel.x,y:pixel.y-offsetY}); // var mkn = new BMap.Marker(Point); // map.addOverlay(mkn); }); }else { alert(‘failed’+this.getStatus()); } });</script></body></html> ...