JS實現百度地圖
阿新 • • 發佈：2019-02-10
使用JavaScript技術，利用api介面開發百度地圖簡單方便。
1.設定整體頁面的佈局樣式
<style type="text/css"> body, html{width:100%;height:100%;margin:0;font-family:"微軟雅黑";} #point{width:980px;min-height:160px;margin-left:12px;margin-top:6px;margin:0 auto;padding-left:2px;} #map{height:1060px;width:1160px;margin:0 auto;margin-top:16px;margin-bottom:8px;} #r-result{width:1080px;min-height:80px;margin-top:10px;padding-left:2px;margin:0 auto;} #r-result table{width:100%;} </style>
2. 最重要的就是利用api介面獲取地圖資料，設定Maker標記，選擇出行策略
<!-- js技術 --> <script type="text/javascript"> window.onload = loadScript; // 首次載入的函式 function loadScript() { var script = document.createElement("script"); // 申請的AK script.src = "http://api.map.baidu.com/api?v=2.0&ak=YBPGfONGeN2ENSn9YzACYCGzazCKsZsb&callback=initialize";//此為v2.0版本的引用方式 // 百度地圖API功能 document.body.appendChild(script); // 自動定位啟動 autoLocation(); } // 定義全域性變數 var map ; var startAddr,endAddr; var startCity = "天津",endCity=""; // 初始化處理 ： Called first function initialize() { map = new BMap.Map("map"); //初始化地圖,設定城市和地圖級別 // 預設定位點設定 map.centerAndZoom(startCity,12); document.getElementById("start").value = startCity; if(endCity != ""){ } map.enableScrollWheelZoom(); map.enableInertialDragging(); map.enableContinuousZoom(); // var pointA = new BMap.Point(106.486654,29.490295); // 建立點座標A--大渡口區 // var pointB = new BMap.Point(106.581515,29.615467); // 建立點座標B--江北區 //alert('從大渡口區到江北區的距離是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。'); //獲取兩點距離,保留小數點後兩位 //var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"red", strokeWeight:8, strokeOpacity:0.5}); //定義折線 //map.addOverlay(polyline); //新增折線到地圖上 // 地圖控制控制元件 var bottom_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左下角，新增比例尺 var bottom_left_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT}); //左下角，新增預設縮放平移控制元件 /*縮放控制元件type有四種類型: BMAP_NAVIGATION_CONTROL_SMALL：僅包含平移和縮放按鈕；BMAP_NAVIGATION_CONTROL_PAN:僅包含平移按鈕；BMAP_NAVIGATION_CONTROL_ZOOM：僅包含縮放按鈕 */ //新增控制元件和比例尺 map.addControl(bottom_left_control); map.addControl(bottom_left_navigation); // 新增手動定位控制元件 var geolocationControl = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); geolocationControl.addEventListener("locationSuccess", function(e){ // 定位成功事件 var address = ""; address += e.addressComponent.province; address += e.addressComponent.city; address += e.addressComponent.district; address += e.addressComponent.street; address += e.addressComponent.streetNumber; // 改變定位後的城市名 startCity = address; document.getElementById("start").value = address; // 清空Maker map.clearOverlays(); alert("當前定位地址為：" + address); initialize(); }); geolocationControl.addEventListener("locationError",function(e){ // 定位失敗事件 alert(e.message); }); map.addControl(geolocationControl); //2D圖，衛星圖 var mapType1 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT,mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}); map.addControl(mapType1); // 預設選擇步行策略 //showPolicy(1); } // 自動定位處理 : 根據瀏覽器的地址獲取經緯度 function autoLocation() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_INVALID_REQUEST){ alert("非法請求"); return; } if(this.getStatus() == BMAP_STATUS_PERMISSION_DENIED){ alert("沒有開啟定位許可權"); return; } if(this.getStatus() == BMAP_STATUS_SERVICE_UNAVAILABLE){ alert("服務不可用"); return; } if(this.getStatus() == BMAP_STATUS_TIMEOUT){ alert("網路超時"); return; } if(this.getStatus() == BMAP_STATUS_SUCCESS){ var geoc = new BMap.Geocoder(); var startPoint = new BMap.Point(r.point.lng,r.point.lat); var mk = new BMap.Marker(startPoint); map.panTo(r.point); map.addOverlay(mk); geoc.getLocation(startPoint, function(rs){ // 根據經緯度獲取實體地址資訊 var addComp = rs.addressComponents; // 改變定位後的城市名 startCity = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; document.getElementById("start").value = startCity; alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); }); // alert('當前位置：'+r.point.lng+','+r.point.lat); }else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) //關於狀態碼 //BMAP_STATUS_SUCCESS 檢索成功。對應數值“0”。 //BMAP_STATUS_CITY_LIST 城市列表。對應數值“1”。 //BMAP_STATUS_UNKNOWN_LOCATION 位置結果未知。對應數值“2”。 //BMAP_STATUS_UNKNOWN_ROUTE 導航結果未知。對應數值“3”。 //BMAP_STATUS_INVALID_KEY 非法金鑰。對應數值“4”。 //BMAP_STATUS_INVALID_REQUEST 非法請求。對應數值“5”。 //BMAP_STATUS_PERMISSION_DENIED 沒有許可權。對應數值“6”。(自 1.1 新增) //BMAP_STATUS_SERVICE_UNAVAILABLE 服務不可用。對應數值“7”。(自 1.1 新增) //BMAP_STATUS_TIMEOUT 超時。對應數值“8”。(自 1.1 新增) } // 地址解析 // 逆地址解析 ：輸入框發生變化事件 function onChangeS() { // 起始 var start = document.getElementById("start").value; var myGeo = new BMap.Geocoder(); // 將地址解析結果顯示在地圖上,並調整地圖視野 myGeo.getPoint(start, function(point){ if (point) { startCity = start; map.clearOverlays(); map.centerAndZoom(startCity,12); map.panTo(point); map.addOverlay(new BMap.Marker(point)); document.getElementById("start").value = startCity; //initialize(); }else{ alert("您輸入地址沒有解析到結果!"); } }, ""); } function onChangeE() { // 終止 var end = document.getElementById("end").value; var myGeo = new BMap.Geocoder(); // 將地址解析結果顯示在地圖上,並調整地圖視野 myGeo.getPoint(end, function(point){ if (point) { endCity = end; map.clearOverlays(); map.centerAndZoom(endCity,12); map.panTo(point); map.addOverlay(new BMap.Marker(point)); document.getElementById("end").value = endCity; //initialize(); }else{ alert("您輸入地址沒有解析到結果!"); } }, ""); } // 對起終點設定的處理函式 function theLocation() { // 通過經緯度設定Maker標記 if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != "") { map.clearOverlays(); var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value); var marker = new BMap.Marker(new_point); // 建立標註 map.addOverlay(marker); // 將標註新增到地圖中 map.panTo(new_point); } } // 出行策略 /* * 1. 步行 2. 駕車 */ function showPolicy(index) { if(startCity == ""){ alert("請輸入出發點"); return; } if(endCity == ""){ alert("請輸入目的地"); return; } if(index == 1){ // 步行 map.clearOverlays(); map.centerAndZoom(startCity,12); var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true }}); walking.search(startCity, endCity); } if(index == 2){ //公交 map.clearOverlays(); map.centerAndZoom(startCity,12); var routePolicy = [BMAP_TRANSIT_POLICY_LEAST_TIME,BMAP_TRANSIT_POLICY_LEAST_TRANSFER,BMAP_TRANSIT_POLICY_LEAST_WALKING,BMAP_TRANSIT_POLICY_AVOID_SUBWAYS]; var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}}); transit.setPolicy(routePolicy[0]); transit.search(startCity, endCity); } if(index == 3){ // 駕車 map.clearOverlays(); map.centerAndZoom(startCity,12); var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: true}}); driving.search(startCity, endCity); } } // 獲取搜尋框輸入的內容 function submitSearch() { var value = document.getElementById("searchValue").value; if(value != ""){ search("'"+value+"'"); }else{ alert("請輸入搜尋關鍵字"); } } // 搜尋內容並返回結果 function search(str) { if(str != ""){ map.clearOverlays(); map.centerAndZoom(startCity,12); var local = new BMap.LocalSearch(map, {renderOptions: {map: map, panel: "r-result",autoViewport: true}}); local.search(str); }else{ alert("搜尋內容錯誤"); } } </script>
3. 頁面佈局css
<body> <div id="" style="width:1120px;height:30px;margin:0 auto;font-size:18px;background:#0000cc;color:#fff;text-align:left;padding-left:24px;padding-top:8px;padding-bottom:6px;"> | 出行遊玩，定製屬於自我的Map </div> <div id="point"> 我的位置: <input id="start" type="text" size="28px" style="width:136px; margin-right:10px;" onchange="onChangeS()"/> ——> 目的地: <input id="end" type="text" size="28px" style="width:136px; margin-right:10px;" onchange="onChangeE()"/> <input type="button" value="確定" style="width:54px; font-size:18px;margin-right:10px;margin-top:16px;background:#888;" onclick="showPolicy(1)" /> <br/><p> <div style="width:100%;height:30px;margin-bottom:2px;padding-bottom:0px;"> <div style="width:188px;float:left;background:#066;color:#fff;margin-bottom:4px;margin-top:0px;padding-top:4px;padding-bottom:4px;text-align:center;font-size:18px;"> 出行策略 </div> <div style="float:left;margin-left:6px;padding-top:5px;"> <input type="radio" value="policy_1" name="policy" style="font-size:18px;margin-right:10px;color:#fff;" onclick="showPolicy(1)" >步行</input> <input type="radio" value="policy_2" name="policy" style="font-size:18px;margin-right:10px;color:#fff;" onclick="showPolicy(2)" >公交出行</input> <input type="radio" value="policy_3" name="policy" style="font-size:18px;margin-right:10px;color:#fff;" onclick="showPolicy(3)" >駕車出行</input> </div> </div> <br/> <div style="width:100%;height:30px;margin-bottom:4px;margin-top:0px;"> <div style="width:188px;float:left;background:#066;color:#fff;margin-top:4px;padding-top:4px;padding-bottom:4px;text-align:center;font-size:18px;">搜尋周邊</div> <div style="width:24px;float:left;margin-left:28px;margin-top:8px;margin-right:8px;"> <input type="text" id="searchValue" size="22px"/> </div> <div style="width:36px;float:left;margin-top:8px;margin-left:168px;"> <input type="button" onclick="submitSearch()" style="font-size:16px;border:solid 1;" onMouseOver="JavaScript:this.style.background='#00ce00'" onMouseOut="this.style.background=''" value="搜尋" /> </div> </div> <div style="width:100%;margin-top:16px;margin-left:26px;margin-bottom:8px;"> <input type="button" value="餐飲" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#c33;color:#fff;" onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" onclick="search('餐飲')"/> <input type="button" value="酒店" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#068;color:#fff;" onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" onclick="search('酒店')"/> <input type="button" value="地鐵" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#c36;color:#fff;" onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" onclick="search('地鐵')"/> <input type="button" value="公交" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#888;color:#fff;" onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" onclick="search('公交')"/> <input type="button" value="周圍景點" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#033;color:#fff;" onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" onclick="search('景點')"/> <input type="button" value="公園" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#09c;color:#fff;" onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" onclick="search('公園')"/> <input type="button" value="小吃街" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#906;color:#fff;" onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" onclick="search('小吃')"/> <input type="button" value="遊樂場" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#936;color:#fff;" onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" onclick="search('遊樂場')"/> <input type="button" value="KTV" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#c00;color:#fff;" onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" onclick="search('KTV')"/> <input type="button" value="商業街巷" style="font-size:20px;margin-right:6px;margin-top:2px;border:0;background:#963;color:#fff;" onMouseOver="JavaScript:this.style.color='#000'" onMouseOut="this.style.color='#fff'" onclick="search('商業街巷')"/> <input type="button" value="搜尋更多>>" style="background:#fff;color:#000;border:0;clickable:false;"> </div> </div> <div id="map"></div> <div id="r-result"></div> </body> </html>
以下是結果截圖 | 出行遊玩，定製屬於自我的Map 我的位置: ——> 目的地:
出行策略 步行公交出行駕車出行
搜尋周邊