百度地圖api實現的定位，導航，附近搜尋
阿新 • • 發佈：2019-01-02
實現功能： 1、定位，根據裝置自動定位，設定到區，可自行調整；
2、附近地標搜尋，顯示定位附近圖書館，可更改；
3、路線規劃，點選終點或手動輸入終點位置；
程式碼實現：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <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"> #allmap{width:300px;height:300px;} p{margin-left:5px; font-size:14px;} </style> <style type="text/css"> body, html {width: 100%;height: 100%; margin:0;font-family:"微軟雅黑";} #allmap{height: 350px;width:100%;} #r-result,#r-result table{width:100%;} input { font-family: "micrsoft yahei"; width: 80%; height: 2em; font-size: 1em; line-height: 2em; border: 0px; outline: 0px; padding: .2em 1em; margin: 0em 10%;} .btn-group { width: 100%; border-top: 1px solid #DDD; border-bottom: 2px solid #DDD;} button {width: 32%; text-align: center; border: 0; border-radius: 0; background-color: inherit; height: 44px; line-height: 44px; font-size: 15px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=*******AK可到百度地圖開發平臺自行申請********"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script> <title>BookSiYi</title> </head> <body> <div id="search"> <input type="text" id="start" placeholder="正在定位您的位置..." style="border-bottom: 1px solid #DDD; " /> <input type="text" id="end" placeholder="請選擇終點" onchange="searchRoute()"/> <div class="btn-group"> <button id="bus-search" class="button">公交</button> <button id="driver-search" class="button">駕車</button> <button id="walk-search" class="button">步行</button> </div> </div> <div id="allmap"></div> <div id="r-result"></div> <script type="text/javascript"> $("#bus-search").css("background-color", "#95B7EE"); window.start_point = ""; window.end_point = ""; // 定位物件 var map; var geoc = new BMap.Geocoder(); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ //var mk = new BMap.Marker(r.point); //map.addOverlay(mk); //map.panTo(r.point); window.start_point = r.point.lng+","+r.point.lat; map = new BMap.Map("allmap"); // 建立Map例項 var ep = window.start_point.split(","); function addMapControl(){ //向地圖中新增縮放控制元件 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_ZOOM}); map.addControl(ctrl_nav); //向地圖中新增比例尺控制元件 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,offset: new BMap.Size(10, 5)}); map.addControl(ctrl_sca); } map.centerAndZoom(new BMap.Point(ep[0],ep[1]), 13); map.enableScrollWheelZoom(true); //啟用滾輪放大縮小 var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); local.search("圖書館"); setLocation(r.point); addMapControl(); }else { $("#start").attr("placeholder","請輸入您的當前位置") alert('無法定位到您的當前位置，導航失敗，請手動輸入您的當前位置！'+this.getStatus()); } },{enableHighAccuracy: true}); function setLocation(point){ geoc.getLocation(point, function(rs){ var addComp = rs.addressComponents; var result = addComp.province + addComp.city + addComp.district; $("#start").val(result); //設定定點陣圖標 var new_point = new BMap.Point(rs.point.lng,rs.point.lat); var myIcon = new BMap.Icon("http://www.zhouyfei.xin/mapImage/myload.gif", new BMap.Size(30,30),{ anchor:new BMap.Size(13,15), imageOffset:new BMap.Size(0,0) }); var marker = new BMap.Marker(new_point,{icon:myIcon,isOpen:true}); map.addOverlay(marker); var opts = { width : 40, // 資訊視窗寬度 height: 18, // 資訊視窗高度 title : "我的位置" , // 資訊視窗標題 isOpen: 1, } var infoWindow = new BMap.InfoWindow("地址 : "+$("#start").val(), opts); // 建立資訊視窗物件 marker.addEventListener("click", function(){ map.openInfoWindow(infoWindow,new_point); //開啟資訊視窗 }); //設定監聽，點選地圖設終點，規劃路線 map.addEventListener("click", function(e) { window.end_point = e.point.lng +","+ e.point.lat; var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); searchRoute(); }); }); } var type="bus"; $("#bus-search,#driver-search,#walk-search").click(function(){ var id = $(this).attr("id"); $(".button").css("background-color","#fff"); $("#"+id).css("background-color","#95B7EE"); type = "bus"; if(id == "bus-search"){ type = "bus"; }else if(id == "driver-search"){ type = "driver"; }else if(id == "walk-search"){ type = "walk"; } searchRoute(); }); //搜尋路線 function searchRoute(){ if($("#end").val().length!=0){ var end = $("#end").val(); $("#end").val(""); }else{ var pe = window.end_point.split(","); var end = new BMap.Point(pe[0],pe[1]); } var ps = window.start_point.split(","); var start = new BMap.Point(ps[0], ps[1]); var starIcon = new BMap.Icon("http://www.zhouyfei.xin/mapImage/start.png", new BMap.Size(22, 32)); var endIcon = new BMap.Icon("http://www.zhouyfei.xin/mapImage/end.png", new BMap.Size(22,32)); if(type == "bus"){ var transit = new BMap.TransitRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}}); transit.search(start, end); transit.setMarkersSetCallback(function(result){ result[0].marker.setIcon(starIcon); result[1].marker.setIcon(endIcon); }); }else if(type == "driver"){ var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}}); driving.search(start, end); driving.setMarkersSetCallback(function(result){ result[0].marker.setIcon(starIcon); result[1].marker.setIcon(endIcon); }); }else if(type == "walk"){ var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-result", autoViewport: false}}); walking.search(start, end); walking.setMarkersSetCallback(function(result){ result[0].marker.setIcon(starIcon); result[1].marker.setIcon(endIcon); }); //walking.search("天壇公園","故宮"); } } </script> </body> </html>