最近的项目要做的地图比较多，有的还比较复杂，而地图用到的坐标，上网找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，接下来肯定就是复制到本地编辑修改啦：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <style type="text/css">
  7.         body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  8.     </style>
  9.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
  10.     <title>地址解析</title>
  11. </head>
  12. <body>
  13.     <div id="allmap"></div>
  14. </body>
  15. </html>
  16. <script type="text/javascript">
  17.     // 百度地图API功能
  18.     var map = new BMap.Map("allmap");
  19.     var point = new BMap.Point(116.331398,39.897445);
  20.     map.centerAndZoom(point,12);
  21.     // 创建地址解析器实例
  22.     var myGeo = new BMap.Geocoder();
  23.     // 将地址解析结果显示在地图上,并调整地图视野
  24.     myGeo.getPoint("北京市海淀区上地10街", function(point){
  25.         if (point) {
  26.             map.centerAndZoom(point, 16);
  27.             map.addOverlay(new BMap.Marker(point));
  28.         }else{
  29.             alert("您选择地址没有解析到结果!");
  30.         }
  31.     }, "北京市");
  32. </script>

　　6. 我们在浏览器打开复制下来的代码，哎呀妈，居然提示报错了 ：(

　　　看提示，我们看到是因为缺了百度地图开发平台秘钥，所以我们接下来要复制提示的链接去获取秘钥。

　　　　

　　7. 打开上面提示的链接 http://lbsyun.baidu.com/apiconsole/key#  ，可以看到，我这里已经创建好了一个秘钥

　　　　

　　　8. 点击“创建应用”创建秘钥应用

　　　　　应用名称自定义，这里为了演示，随意输入的，然后选择浏览器端（根据自己的需求选择），启用服务我是全选的，白名单的话，因为我这里是做测试的，所以根据提示输入了星号。好啦，点击提交就可以了。

　　　　

　　　9. 提交新建应用后会回到应用列表，可以看到我们刚提交的应用，这样就得到了我们需要的秘钥啦

　　　　

　　10. 那么怎么使用该秘钥呢？先复制圈起来的那一串字符，然后替换demo代码的“您的秘钥”,下面灰色标识部分：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <style type="text/css">
  7.         body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  8.     </style>
  9.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=foH5UE6linZ6MhbINCOEAhIGuNqaO6t3"></script>
  10.     <title>地址解析</title>
  11. </head>
  12. <body>
  13.     <div id="allmap"></div>
  14. </body>
  15. </html>
  16. <script type="text/javascript">
  17.     // 百度地图API功能
  18.     var map = new BMap.Map("allmap");
  19.     var point = new BMap.Point(116.331398,39.897445);
  20. //    map.centerAndZoom(point,12);
  21.     // 创建地址解析器实例
  22.     var myGeo = new BMap.Geocoder();
  23.     // 将地址解析结果显示在地图上,并调整地图视野
  24.     myGeo.getPoint("北京市海淀区上地10街", function(point){
  25.         if (point) {
  26. //            map.centerAndZoom(point, 16);
  27. //            map.addOverlay(new BMap.Marker(point));   //这里不需要展示地图，所以将生成地图的代码注释了，然后再下面打印坐标
  28.             console.log(point);
  29.         }else{
  30.             alert("您选择地址没有解析到结果!");
  31.         }
  32.     }, "北京市");
  33. </script>

　　11. 再次刷新浏览器，打开开发者工具查看输出结果：

　　　

　　12. 好啦，上面已经实现了地址转换成坐标的功能啦。那么我们来看下具体的需求： 获取广东省市县的坐标

　　13.  我们这里以广东省的21个地级市转换为例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>根据位置获取坐标</title>
  6.     </head>
  7.     <body>
  8.         <textarea name="" rows="" cols="" id="addressArea"></textarea>
  9.  
  10.         <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=hM6RX0q32fRq0q5OWMNM0wlGYuuwQtSa"></script>
  11.         <script src="jquery.min.js"></script>
  12.         <script>
  13.             var newCityDatas = {};   //存放数据的对象
  14.             //var cityDatasStr = "广州、深圳、佛山、东莞、中山、珠海、江门、肇庆、惠州、汕头、潮州、揭阳、汕尾、湛江、茂名、阳江、韶关、清远、云浮、梅州、河源";  
  15.  
  16. 　　　　　　　//数据来源于百度百科，复制过来后修改成有规律的字符串，然后转换成数组，在页面输出后再复制，也就得到下面的数组，要给每个数据添加“市”；
    　　
  17.             var cityDatas = ["广州市", "深圳市", "佛山市", "东莞市", "中山市", "珠海市", "江门市", "肇庆市", "惠州市", "汕头市", "潮州市", "揭阳市", "汕尾市", "湛江市", "茂名市", "阳江市", "韶关市", "清远市", "云浮市", "梅州市", "河源市"];
    　　　　　　　
    　　　　　　　//遍历数组，调用方法将位置转成坐标
  18.             for (var i=0;i<cityDatas.length;i++) {
  19.                 getPoint(cityDatas[i]);
  20.             }
  21.  
  22.             function getPoint(adds){
  23.                 // 创建地址解析器实例
  24.                 var myGeo = new BMap.Geocoder();
  25.                 // 将地址解析结果显示在地图上,并调整地图视野
  26.                 myGeo.getPoint(adds, function(point){
  27.                     console.log(adds);
  28.                     newCityDatas[adds] = [point.lng,point.lat];
  29.                     console.log(newCityDatas);
  30.                     $("#addressArea").val(JSON.stringify(newCityDatas));  //输出拼接后的结果
  31.                 });
  32.             }
  33.         </script>
  34.  
  35.     </body>
  36. </html>

　　14. 最后输出的数据结果如下：具体的数据格式根据自己的项目需求做调整哈 ：）

  1. {
  2.     "佛山市": [113.134026,23.035095],
  3.     "东莞市": [113.763434,23.043024],
  4.     "珠海市": [113.562447,22.256915],
  5.     "深圳市": [114.025974,22.546054],
  6.     "广州市": [113.30765,23.120049],
  7.     "江门市": [113.078125,22.575117],
  8.     "肇庆市": [112.479653,23.078663],
  9.     "中山市": [113.42206,22.545178],
  10.     "惠州市": [114.410658,23.11354],
  11.     "汕头市": [116.72865,23.383908],
  12.     "潮州市": [116.630076,23.661812],
  13.     "湛江市": [110.365067,21.257463],
  14.     "揭阳市": [116.379501,23.547999],
  15.     "汕尾市": [115.372924,22.778731],
  16.     "茂名市": [110.931245,21.668226],
  17.     "阳江市": [111.97701,21.871517],
  18.     "韶关市": [113.594461,24.80296],
  19.     "云浮市": [112.050946,22.937976],
  20.     "清远市": [113.040773,23.698469],
  21.     "梅州市": [116.126403,24.304571],
  22.     "河源市": [114.713721,23.757251]
  23. }

　　

　　因为这次找坐标找得有点耗时，所以总结下来以后方便回顾学习，有问题的可以留言哦，有空再总结下最近做的地图，某些数据也是比较难找  ：）

调用百度地图开发平台的JavascriptAPI实现将市县位置转换成坐标的更多相关文章

  1. jQuery：[2]百度地图开发平台实战

    jQuery:[2]百度地图开发平台实战 原文链接:   http://blog.csdn.net/moniteryao/article/details/51078779 快速开始 开发平台地址 ht ...

  2. Android 调用百度地图API

    一.到 百度地图开发平台下载SDK http://lbsyun.baidu.com/index.php?title=androidsdk/sdkandev-download 1.点击自定义下载 2.下 ...

  3. web开发调用百度地图API + AK申请

    web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...

  4. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  5. [置顶] Xamarin android如何调用百度地图入门示例（一）

    在Xamarin android如何调用百度地图呢? 首先我们要区分清楚,百度地图这是一个广泛的概念,很多刚刚接触这个名词"百度地图api",的确是泛泛而谈,我们来看一下百度地图的 ...

  6. 微信小程序，天气预报（百度地图开放平台API）

    小程序看似一种全新的东西,但好在基本上就是曾经HTML,CSS,JS的一个微变版本. 语法和之前一样.只是一些用法和名字(标签)发生了一些变化. 小程序主要就四种扩展名的文件:js,json,wxml ...

  7. Android studio 百度地图开发（2）地图定位

    Android studio 百度地图开发(2)地图定位 email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是Android S ...

  8. JavaScript调用百度地图

    在网站开发过程中,经常会调用到地图,百度地图提供Web开发.Android开发.iOS开发API及SDK,百度地图JavaScript API可帮助您在网站中构建功能丰富.交互性强的地图应用,本篇博客 ...

  9. Android中调用百度地图

    一.调用百度地图 --第一种方法 1.下载百度地图SDK SDK可以拆分下载,需要使用那一部分功能就下载相应包含的SDK,如下图 核心的的jar 和so包,放在工程中的libs目录下 2.申请key ...

随机推荐

  1. centos6.5 redis 安装配置及java调用

    1.安装gcc 执行命令  yum install gcc 2. 安装ruby环境 yum install ruby yum install rubygems gem install redis 下载 ...

  2. div浮停在页面最上或最下

    div{ position:fixed; bottom:0px; // top:0px; z-index:999; } bottom:0px 浮停在最下面,top:0px 浮停在最上面:z-index ...

  3. Selenium安装中的一些问题及解决办法-软硕1703班3组整理分享

    非常感谢软件工程硕士1703班3组同学的热心,他们将安装Selenium过程中踩过的坑替大家填上了.希望还没有来得及踩坑的,或者掉进坑里还没爬出来的小组,能顺利跨过去这个安装的坑. 如下是原文. Se ...

  4. 2018.07.22 codeforces750E（线段树维护状态转移）

    传送门 给出一个数字字串,给出若干个询问,询问在字串的一段区间保证出现2017" role="presentation" style="position: re ...

  5. Part 2 - Fundamentals（4-10）

    https://simpleisbetterthancomplex.com/series/2017/09/11/a-complete-beginners-guide-to-django-part-2. ...

  6. RAC环境数据库重启实例

    1.重启之前最好先看一下节点信息和运行状态 可以通过srvctl status database -d 数据库名 //查看节点信息 Crs_stat //查看节点状态 可以看到数据节点它由两个实例组成 ...

  7. JavaScript面向对象编程[转]

    JavaScript面向对象编程 命名空间 命名空间是一个容器,它允许开发人员在一个独特的,特定于应用程序的名称下捆绑所有的功能. 在JavaScript中,命名空间只是另一个包含方法,属性,对象的对 ...

  8. Structure From Motion(二维运动图像中的三维重建)

    SfM(Structure from Motion)简介 Structure from motion (SfM) is a photogrammetric range imaging techniqu ...

  9. 快速学会在JSP中使用EL表达式

    在没有学会EL表达式之前,我们想在JSP文件中获取servlet或者其他JSP页面传来的值,通常都是在JSP页面中编写java代码来实现.而在jsp页面编写Java 代码,这种做法时不规范的,将会产生 ...

  10. error: libXpm.(a|so)

    centos 6.5 安装php时老是报错,找了很久答案都是千篇一律且不起作用,最后找到一个答案,特记录在此 脚本: tar zxvf php-5.3.28.tar.gz && cd ...