调用百度地图开发平台的JavascriptAPI实现将市县位置转换成坐标
最近的项目要做的地图比较多，有的还比较复杂，而地图用到的坐标，上网找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=hM6RX0q32fRq0q5OWMNM0wlGYuuwQtSa"></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]
}
因为这次找坐标找得有点耗时，所以总结下来以后方便回顾学习，有问题的可以留言哦，有空再总结下最近做的地图，某些数据也是比较难找 ：）
调用百度地图开发平台的JavascriptAPI实现将市县位置转换成坐标的更多相关文章
- jQuery：[2]百度地图开发平台实战
jQuery:[2]百度地图开发平台实战 原文链接: http://blog.csdn.net/moniteryao/article/details/51078779 快速开始 开发平台地址 ht ...
- Android 调用百度地图API
一.到 百度地图开发平台下载SDK http://lbsyun.baidu.com/index.php?title=androidsdk/sdkandev-download 1.点击自定义下载 2.下 ...
- web开发调用百度地图API + AK申请
web开发调用百度地图API + AK申请 要使用百度地图的API我们首先需要在我们的html页面引入js----`` 如何获取百度地图ak: 1.登陆百度地图开发者平台 2.注册百度开发者账号并登陆 ...
- 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API
使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...
- [置顶]
Xamarin android如何调用百度地图入门示例（一）
在Xamarin android如何调用百度地图呢? 首先我们要区分清楚,百度地图这是一个广泛的概念,很多刚刚接触这个名词"百度地图api",的确是泛泛而谈,我们来看一下百度地图的 ...
- 微信小程序，天气预报（百度地图开放平台API）
小程序看似一种全新的东西,但好在基本上就是曾经HTML,CSS,JS的一个微变版本. 语法和之前一样.只是一些用法和名字(标签)发生了一些变化. 小程序主要就四种扩展名的文件:js,json,wxml ...
- Android studio 百度地图开发（2）地图定位
Android studio 百度地图开发(2)地图定位 email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是Android S ...
- JavaScript调用百度地图
在网站开发过程中,经常会调用到地图,百度地图提供Web开发.Android开发.iOS开发API及SDK,百度地图JavaScript API可帮助您在网站中构建功能丰富.交互性强的地图应用,本篇博客 ...
- Android中调用百度地图
一.调用百度地图 --第一种方法 1.下载百度地图SDK SDK可以拆分下载,需要使用那一部分功能就下载相应包含的SDK,如下图 核心的的jar 和so包,放在工程中的libs目录下 2.申请key ...
随机推荐
- oracle 新建数据库 ，新建用户
net manager 数据库名----电脑名localhost 1521 , 服务名 orcl (oracle 版本不一样, 不同版本不一样,,) 然后测试.. sys 账号登录 新建用 ...
- 【Maven】Nexus（Maven仓库私服）下载与安装
Nexus介绍 Nexus 是Maven仓库管理器,如果你使用Maven,你可以从Maven中央仓库 下载所需要的构件(artifact),但这通常不是一个好的做法,你应该在本地架设一个Maven仓库 ...
- hdu - 1072（dfs剪枝或bfs）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1072 思路:深搜每一个节点,并且进行剪枝,记录每一步上一次的s1,s2:如果之前走过的时间小于这一次, ...
- 解决Docker时区与主机时区不一致的问题
在Dockerfile里面增加以下红色的部分 FROM hub.chinacloud.com/common/jdk:8MAINTAINER xxx@chinacloud.com.cn RUN mkdi ...
- ViewFlipper实现自动播放的图片库
作者实现的基础上,加上了文字的变换 public class MainActivity extends Activity { private ViewFlipper viewFlipper; priv ...
- js基础学习笔记（四）
4.1 什么是数组 我们知道变量用来存储数据,一个变量只能存储一个内容,存储多个值时,就需要用到数组. 数组是一个值的集合,每个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数 ...
- Windows环境下的安装gcc
Windows具有良好的界面和丰富的工具,所以目前linux开发的流程是,windows下完成编码工作,linux上实现编译工作. 为了提高工作效率,有必要在windows环境下搭建一套gcc,gdb ...
- 保留注释换行的python模块configparser
python语言用来解析配置文件的模块是ConfigParser,python3中是configparser模块,我在使用中发现write方法在将配置项重新写入文 件时,配置文件中的空行和注释行都会被 ...
- 关于Windbg Local kernel debugging for Win7
在使用Windbg的时候,如果在Win7上使用Kernel Debug时候会弹出下面的对话框: 在这个对话框中所描述的信息中我们可以看到这么一段话: “Local kernel debugging i ...
- queued frame 造成图形性能卡顿
曾经遇到过卡顿是类似的原因:当时对显卡底层知识理解不懂,看到引擎底层有一个MaxFramexxx的接口,实现是使用注册表修改显卡底层的注册信息,当时还是一个掉接口习惯的客户端码农的思维,没理解底层含义 ...