最近的项目要做的地图比较多,有的还比较复杂,而地图用到的坐标,上网找json文件更是良莠不齐的。真是让人伤脑筋,后来突然想到了百度地图开发平台,没想到真的有对应的API哦,谢天谢地!!!下面说一下完整的实现过程吧。
详细步骤:
1. 首先找到百度地图开发平台 (链接: http://lbsyun.baidu.com/)
2.打开下图的Javascript API页面:
3. 接着上面的操作,找到 Javascript API页面左侧的示例DEMO,点击跳转链接 : http://lbsyun.baidu.com/jsdemo.htm#a1_2
4. 在示例DEMO页面下,找到逆/地址解析下的地址解析,如下图:
5. 好啦,找到我们想要的demo,接下来肯定就是复制到本地编辑修改啦:
<!DOCTYPE html> <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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>地址解析</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,12); // 创建地址解析器实例 var myGeo = new BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint("北京市海淀区上地10街", function(point){ if (point) { map.centerAndZoom(point, 16); map.addOverlay(new BMap.Marker(point)); }else{ alert("您选择地址没有解析到结果!"); } }, "北京市"); </script>
6. 我们在浏览器打开复制下来的代码,哎呀妈,居然提示报错了 :(
看提示,我们看到是因为缺了百度地图开发平台秘钥,所以我们接下来要复制提示的链接去获取秘钥。
7. 打开上面提示的链接 http://lbsyun.baidu.com/apiconsole/key# ,可以看到,我这里已经创建好了一个秘钥
8. 点击“创建应用”创建秘钥应用
应用名称自定义,这里为了演示,随意输入的,然后选择浏览器端(根据自己的需求选择),启用服务我是全选的,白名单的话,因为我这里是做测试的,所以根据提示输入了星号。好啦,点击提交就可以了。
9. 提交新建应用后会回到应用列表,可以看到我们刚提交的应用,这样就得到了我们需要的秘钥啦
10. 那么怎么使用该秘钥呢?先复制圈起来的那一串字符,然后替换demo代码的“您的秘钥”,下面灰色标识部分:
<!DOCTYPE html> <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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=foH5UE6linZ6MhbINCOEAhIGuNqaO6t3"></script> <title>地址解析</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); // map.centerAndZoom(point,12); // 创建地址解析器实例 var myGeo = new BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint("北京市海淀区上地10街", function(point){ if (point) { // map.centerAndZoom(point, 16); // map.addOverlay(new BMap.Marker(point)); //这里不需要展示地图,所以将生成地图的代码注释了,然后再下面打印坐标 console.log(point); }else{ alert("您选择地址没有解析到结果!"); } }, "北京市"); </script>
11. 再次刷新浏览器,打开开发者工具查看输出结果:
12. 好啦,上面已经实现了地址转换成坐标的功能啦。那么我们来看下具体的需求: 获取广东省市县的坐标
13. 我们这里以广东省的21个地级市转换为例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>根据位置获取坐标</title> </head> <body> <textarea name="" rows="" cols="" id="addressArea"></textarea> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=foH5UE6linZ6MhbINCOEAhIGuNqaO6t3"></script> <script src="jquery.min.js"></script> <script> var newCityDatas = {}; //存放数据的对象
//var cityDatasStr = "广州、深圳、佛山、东莞、中山、珠海、江门、肇庆、惠州、汕头、潮州、揭阳、汕尾、湛江、茂名、阳江、韶关、清远、云浮、梅州、河源";
//数据来源于百度百科,复制过来后修改成有规律的字符串,然后转换成数组,在页面输出后再复制,也就得到下面的数组,要给每个数据添加“市”;
var cityDatas = ["广州市", "深圳市", "佛山市", "东莞市", "中山市", "珠海市", "江门市", "肇庆市", "惠州市", "汕头市", "潮州市", "揭阳市", "汕尾市", "湛江市", "茂名市", "阳江市", "韶关市", "清远市", "云浮市", "梅州市", "河源市"];
//遍历数组,调用方法将位置转成坐标 for (var i=0;i<cityDatas.length;i++) { getPoint(cityDatas[i]); } function getPoint(adds){ // 创建地址解析器实例 var myGeo = new BMap.Geocoder(); // 将地址解析结果显示在地图上,并调整地图视野 myGeo.getPoint(adds, function(point){ console.log(adds); newCityDatas[adds] = [point.lng,point.lat]; console.log(newCityDatas); $("#addressArea").val(JSON.stringify(newCityDatas)); //输出拼接后的结果 }); } </script> </body> </html>
14. 最后输出的数据结果如下:具体的数据格式根据自己的项目需求做调整哈 :)
{ "佛山市": [113.134026,23.035095], "东莞市": [113.763434,23.043024], "珠海市": [113.562447,22.256915], "深圳市": [114.025974,22.546054], "广州市": [113.30765,23.120049], "江门市": [113.078125,22.575117], "肇庆市": [112.479653,23.078663], "中山市": [113.42206,22.545178], "惠州市": [114.410658,23.11354], "汕头市": [116.72865,23.383908], "潮州市": [116.630076,23.661812], "湛江市": [110.365067,21.257463], "揭阳市": [116.379501,23.547999], "汕尾市": [115.372924,22.778731], "茂名市": [110.931245,21.668226], "阳江市": [111.97701,21.871517], "韶关市": [113.594461,24.80296], "云浮市": [112.050946,22.937976], "清远市": [113.040773,23.698469], "梅州市": [116.126403,24.304571], "河源市": [114.713721,23.757251] }
因为这次找坐标找得有点耗时,所以总结下来以后方便回顾学习,有问题的可以留言哦,有空再总结下最近做的地图,某些数据也是比较难找 :)