百度地圖api實現的定位,導航,附近搜尋

先上效果圖:<我的位置圖示下載:http://www.zhouyfei.xin/mapImage/myload.gif> 這個圖示非常好用,是找的:http://www.cnblogs.com/shuilangyizu/p/5888031.html

<起點 | 終點圖示:自ps的,可將就這用>:http://www.zhouyfei.xin/mapImage/start.png

http://www.zhouyfei.xin/mapImage/end.png

實現功能:  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>