百度地圖API使用樣例
阿新 • • 發佈：2019-01-06
前言
隨著移動網際網路的急速發展，對位置服務的需求越來越強烈，如美團、滴滴、共享單車等等一系列的網際網路應用都是基於位置提供服務的。國內兩大地圖提供商百度地圖、高德地圖不僅僅在導航等應用提供基礎的服務，還對外提供一些開放的位置服務的API，開發者可以利用這些第三方的API快速構建自己的位置服務應用。
初識百度地圖API
基於百度地圖位置服務開發應用，首先應當先到百度地圖開放平臺註冊開發者賬號，然後建立應用授權，如果是用來開發學習的，這些授權是免費的。以下是百度地圖開放的一些特性：
地圖展示
控制元件新增（放大縮小lidebar）
地圖標註
地名關鍵字檢索
出行路線規劃
全景圖展現
定位
工具測量
API運用樣例
執行效果頁面 https://dosthing.github.io/imagic/baidumap/map.html
樣例原始碼
<!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:"微軟雅黑"; } #nav{ width: 100%; height: 60px; background: url(./mapnav.png); background-size: cover; } #mapsearch{ width: 100%; height: 60px; background:rgba(242,242,242,0.1); border-radius: 15px; float:top; } </style> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=eakY1xIF0A4bFdvIgaSA5EmvyDQDuuXl"></script> <title>Warm heart map</title> </head> <body> <div id="nav"> <div id="mapsearch"> <div style="font-size: 16px; padding-top: 8px; padding-left: 15px; color: #FF3030;">熱搜詞： <a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">天安門</a> <a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">桂林山水</a> <a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">天涯海角</a> <a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">世界之窗</a> <a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">希爾頓酒店</a> <a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">KTV</a> <a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">美食街</a> <a href="#" onclick="hotcityclick(this)" style="text-decoration:none; margin-left: 5px;">景點</a> <input type="text" id ="searchinput" name="weatherinput" placeholder="請輸入要查詢的地名或景點，如：廣州塔" style="width:400px; height:32px;background:rgba(242,242,242,0.5); margin-left:120px; font-size: 16px;color: #330000;"></input> <button id="searchbtn" onmouseover="mouseon(this)" style="width:80px; height:32px; background: #CFE2F3; font-size: 16px;">Search</button> </div> </div> </div> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); // 建立Map例項 map.centerAndZoom(new BMap.Point(113.204, 23.215), 11); // 初始化地圖,設定中心點座標和地圖級別 //新增地圖型別控制元件 map.addControl(new BMap.MapTypeControl({ mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); map.setCurrentCity("廣州"); // 設定地圖顯示的城市 此項是必須設定的 map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放 var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); function hotcityclick(obj){ var hotsearch = obj.innerHTML; local.search(hotsearch); } searchbtn.onclick = function(){ var searchplace = document.getElementById('searchinput').value; if(searchplace != ""){ local.search(searchplace); } } </script>
總結
在網際網路高度發達的今天，很難有巨頭能夠容納如此大體量的市場，對市場細分越來越重要，正如此www原則（who I am，what I do，where I go）已成為網際網路公司吾日三省吾身的問題一樣，每個公司每個人都有自己的角色定位。專注自身的研發，合理引用第三方的支援已經成為產品快速開發的主流，本文用於記錄利用百度地圖提供的API做一個小小demo應用，2018-冬至時分於廣州。