系列鏈接:
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>