系列链接:

Java web与web gis学习笔记(一)——Tomcat环境搭建

Java web与web gis学习笔记(二)——百度地图API调用

JavaWeb和WebGIS学习笔记(三)——GeoServer 发布shp数据地图


一.申请百度地图开发者

百度地图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>

Java web与web gis学习笔记(二)——百度地图API调用的更多相关文章

  1. python3.4学习笔记(二十五) Python 调用mysql redis实例代码

    python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...

  2. Android学习笔记之百度地图

    步行路线搜索及RouteOverlay 方式与驾车路线搜索类似,只需将mMKSearch.drivingSearch(null, start, null, end)修改为mMKSearch.walki ...

  3. Java web与web gis学习笔记(一)——Tomcat环境搭建

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  4. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

  5. amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  6. amazeui学习笔记二(进阶开发2)--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  7. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  8. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  9. 学习笔记(二)--->《Java 8编程官方参考教程(第9版).pdf》:第七章到九章学习笔记

    注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法者自负一切 ...

随机推荐

  1. Java如何实现定时任务?

    我是3y,一年CRUD经验用十年的markdown程序员‍常年被誉为优质八股文选手 挺早就规划了要引入分布式定时任务框架了,在年前austin就已经接入了,但代码过年一直都没写,文章也就一直拖到今天了 ...

  2. IC设计基础

    一 前言 这一周连续两场线下面试,紧接着又是微信视频面试,从连续三天的面试中,收获颇丰! 存在的问题: 一是对项目细节模糊: 二是IC基础知识薄弱: 具体表现是,在面试过程中,如被问到DDR3和千兆以 ...

  3. luogu4883 mzf的考验

    题目描述: luogu 题解: 当然splay. 区间翻转是基本操作. 区间异或?按套路记录区间内每一位$1$的个数,异或的时候按位取反即可. 区间查询同理. 因为要按位维护,所以复杂度多了个log. ...

  4. newFixedThreadPool的默认值

    可以点进去,每个的默认值都是不同的

  5. ConcurrentHashMap 的并发度是什么 ?

    ConcurrentHashMap 的并发度就是 segment 的大小,默认为 16,这意味着最多同时可以有 16 条线程操作 ConcurrentHashMap,这也是ConcurrentHash ...

  6. Spring 对 DAO 的支持?

    Spring 对数据访问对象(DAO)的支持旨在简化它和数据访问技术如 JDBC, Hibernate or JDO 结合使用.这使我们可以方便切换持久层.编码时也不用担心 会捕获每种技术特有的异常.

  7. 4. Git基本工作流程

    4. Git基本工作流程 Git工作区域 向仓库中添加文件流程

  8. 18个基于 HTML5 Canvas 开发的图表库

    如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐.很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用.HTML 5 规范引进了很多新特性,其中之一就是 Canvas ...

  9. HTML中meta标签详解;property=og标签详解

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之 ...

  10. CSRF浅析

    概念 CSRF,Cross Site Request Forgery,跨站请求伪造. 为什么跨站的请求需要伪造? 因为浏览器实现了同源策略,这里可以将站和源视为同一个概念. 同源策略 The same ...