Java web與web gis學習筆記(二)——百度地圖API調用


系列鏈接:
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我們需要注冊百度賬號,並認證成為開發者。

image-20200303111736772

1.注冊並登陸百度賬號

登錄百度地圖開放平台

2.根據自己的需要認證開發者

在百度地圖開放平台->控制台找到"開發者認證",根據需要填寫資料,認證開發者
image-20200303113158232

3.獲取密鑰(AK)

在控制台中找到"我的應用",創建應用,選擇應用類型為“瀏覽器端”,Referer白名單填寫*即可

創建完畢就可以看到剛剛申請的AK了!

二.調用百度地圖API

關於百度地圖JavaScript API的使用,官方文檔給出了詳細的使用說明和示例,關於地圖的展示、控件的添加、定位等功能的實現方法都比較清晰了,需要用到什么功能直接查詢文檔即可。當然,文檔示例不可避免存在一些問題,需要自己在實際應用中甄別。
image-20200303120905997

在使用時將圖中圈出的位置替換成自己剛剛生成的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>

image-20200303133409180


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM