Java web与web gis学习笔记（二）—

系列链接：
Java web与web gis学习笔记（一）——Tomcat环境搭建
Java web与web gis学习笔记（二）——百度地图API调用
JavaWeb和WebGIS学习笔记（三）——GeoServer 发布shp数据地图
JavaWeb和WebGIS学习笔记（四）——使用uDig美化地图，并叠加显示多个图层
JavaWeb和WebGIS学习笔记（五）——使用OpenLayers显示地图
JavaWeb和WebGIS学习笔记（六）——使用ArcGIS for Server发布地图服务
JavaWeb和WebGIS学习笔记（七）——MapGuide Open Source安装、配置以及MapGuide Maestro发布地图——超详细！目前最保姆级的MapGuide上手教程！

一.申请百度地图开发者

百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务，提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能，适用于PC端、移动端、服务器等多种设备，多种操作系统下的地图应用开发

---------百度百科

开发web应用需要用到的是百度地图提供的JavaScript API。百度地图的JavaScript API是一套由JavaScript语言编写的应用程序接口，可以很方便地实现我们需要的地图功能。使用API我们需要注册百度账号，并认证成为开发者。

1.注册并登陆百度账号

登录百度地图开放平台

2.根据自己的需要认证开发者

在百度地图开放平台->控制台找到"开发者认证"，根据需要填写资料，认证开发者

3.获取密钥（AK）

在控制台中找到"我的应用"，创建应用，选择应用类型为“浏览器端”，Referer白名单填写*即可

创建完毕就可以看到刚刚申请的AK了！

二.调用百度地图API

关于百度地图JavaScript API的使用，官方文档给出了详细的使用说明和示例，关于地图的展示、控件的添加、定位等功能的实现方法都比较清晰了，需要用到什么功能直接查询文档即可。当然，文档示例不可避免存在一些问题，需要自己在实际应用中甄别。

在使用时将图中圈出的位置替换成自己刚刚生成的AK就可以引入百度地图的JS脚本啦，这里给出一个简单的Demo，通过浏览器打开就可以看效果（将密钥替换为自己的密钥噢）。

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1, user-scalable=no" /><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#allmap{height:600px;width:1000px;}</style><!-- 设置你的百度地图ak --><script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script> <title>百度地图显示</title>
</head>
<body><div id="allmap" ></div><input type="button" onclick="$('#allmap').toggle();" value="隐藏/显示百度地图"/> <input type="button" onclick="setCenter()" value="显示武汉大学"/>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">// 创建地图对象var map = new BMap.Map("allmap");// 初始化地图,用城市名设置地图中心点，显示比例级别map.centerAndZoom("武汉",15);//鼠标滚动缩放map.enableScrollWheelZoom(true);//添加地图类型控件map.addControl(new BMap.MapTypeControl());          function setCenter(){var point = new BMap.Point(114.372519,30.540647);   //根据坐标创建点map.centerAndZoom(point,16);    //用点坐标设置地图中心并显示比例级别}
</script>