地圖能夠先作好靜態頁面在嵌入到jsp中。javascript
在頁面上引入百度地圖js文件，通常如今的html5頁面最好用2.0版本的api，不然可能會出如今部分瀏覽器中地圖出不來的狀況，還有就是申請密鑰
html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你須要申請的密鑰"></script>
html文件中的body中設置div，用來肯定地圖畫在哪裏html5
<span id="city" class="addrres-difang">${city }</span>
<input id="searchtext" type="text" class="wp60" value="${street }" placeholder=""/>
<span id="searchbt" class="addrres-search" onclick="serachlocal()" style="cursor:pointer">搜索</span>
<!-- 地圖填充 -->
<div style="width:600px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>
再就是寫js控制百度地圖的生成，和定製了java
var key='你申請的百度地圖密鑰';
var map = new BMap.Map("map"); // 建立地圖實例(注意這個map和上面那個div中的id值是同樣的)
var point; // 建立點座標
//這裏的globalLng, globalLat是我從數據庫拿來的經緯度，商戶一進來若是有座標就自動定位到本身以前設置位置，
//能夠進行個判斷沒值就給個默認座標值
point = new BMap.Point(globalLng, globalLat);
map.centerAndZoom(point, 15); // 初始化地圖，設置中心點座標和地圖縮放級別
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.enableScrollWheelZoom();//滾輪縮放事件
map.enableContinuousZoom(); // 開啓連續縮放效果
map.enableInertialDragging(); // 開啓慣性拖拽效果
//自定義圖標(覆蓋物)
var customerIcon = new BMap.Icon(baseUrl + "img/baiduMap/baiduMapCustomerInco2.png", new BMap.Size(50,80));
var preMarker = new BMap.Marker(point, {icon:customerIcon});
map.addOverlay(preMarker);
//設置標註可拖拽
preMarker.enableDragging();
//跳動的動畫
preMarker.setAnimation(BMAP_ANIMATION_BOUNCE);
//標註拖拽後的位置
preMarker.addEventListener("dragend", function (e) {
//alert("當前位置：" + e.point.lng + ", " + e.point.lat);
ajaxDragend(e.point.lng, e.point.lat);
});
function ajaxDragend(lng, lat) {
var targetUrl='http://api.map.baidu.com/geocoder/v2/?ak='+key+'&location='+lat+','+lng+'&output=json&pois=0';
jQuery.ajax({
url:targetUrl,
type:"get",
async : false,
dataType:'jsonp',
beforeSend:function(){
//alert(targetUrl);
},
success:function(data,status){
//alert(status);
if(status=='success' && data.status==0){
content = "<div>地址:" + data.result.formatted_address + "</div>";
/*content += '<form action="" method="post"><input type="hidden" name="lng" value="'
+ data.result.location.lng+'"><input type="hidden" name="lat" value="'+data.result.location.lat
+ '"><input onclick="tempSaveLocation("' + data.result.formatted_address + '", "' + lng + '", "' + lat + '")" type="button" value="我在這裏"></form>';*/
content += '<input type="hidden" name="lng" value="' + data.result.location.lng+'">'
+ '<input type="hidden" name="lat" value="'+data.result.location.lat + '">'
+ '<input class="iamthere" onclick="iAmThereOfDragend(this, ' + lng + ', ' + lat + ')" type="button" value="我在這裏">';
var info=new BMap.InfoWindow(content);
preMarker.openInfoWindow(info);
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
//alert(XMLHttpRequest.status);
//alert(XMLHttpRequest.readyState);
//alert(textStatus);
//alert(errorThrown);
}
});
}
//搜索定位
function serachlocal(){
var markerArray=new Array();
var local = new BMap.LocalSearch(map, {
renderOptions: {
map: map,
//panel: "results",//結果容器id
autoViewport: true, //自動結果標註
selectFirstResult: false //不指定到第一個目標
},
pageCapacity: 8,
//自定義marker事件
onMarkersSet:function(pois){
for(var i=0; i<pois.length; i++){
(function(){
var index = i;
var curPoi = pois[i];
var curMarker = pois[i].marker;
markerArray[i] = curMarker;
var content = "<h3>" + curPoi.title + "</h3>";
//content += "<div>地址:" + curPoi.address + "</div>";
content += '<form action="" method="post">'
+ '<input type="hidden" name="province" value="'+ curPoi.province + '">'
+ '<input type="hidden" name="city" value="'+ curPoi.city + '">'
+ '<input type="hidden" name="address" value="'+ curPoi.title + '">'
+ '<input type="hidden" name="lng" value="'+ curPoi.point.lng + '">'
+ '<input type="hidden" name="lat" value="' + curPoi.point.lat+ '">'
/*+ '<input onclick="tempSaveLocation(' + curPoi.province + curPoi.city + curPoi.address + ', ' + curPoi.point.lng + ', ' + curPoi.point.lat + ')" type="button" value="我在這裏"></form>';*/
+ '<input onclick="iAmThereOfSearch(this, ' + curPoi.point.lng + ', ' + curPoi.point.lat + ')" type="button" value="我在這裏"></form>';
curMarker.addEventListener('click',function(event){
//showAtrributes(event);
var info = new BMap.InfoWindow(content);
curMarker.openInfoWindow(info);
var position = curMarker.getPosition();
//document.getElementById("mapx").innerHTML="點擊搜索圖標經度:"+position.lng;
//document.getElementById("mapy").innerHTML="點擊搜索圖標緯度:"+position.lat;
//document.getElementById("level").innerHTML="縮放等級:"+this.getZoom();
});
})();
}
},
//自定義搜索回調數據
onSearchComplete:function(results){
if(local.getStatus() == BMAP_STATUS_SUCCESS){
}
},
});
//alert(jQuery("#city").text() + document.getElementById("searchtext").value);
local.search(jQuery("#city").text() + document.getElementById("searchtext").value);
}
//點擊拖拽事件"我在這裏"(不能傳中文參數,很坑爹的)
function iAmThereOfDragend(obj, lng, lat) {
/*alert("lng : " + lng);
alert("lat : " + lat);
alert(jQuery(".BMap_bubble_content div").text());*/
var location = jQuery(".BMap_bubble_content div").text();
if (location != null && location.length != 0) {
var locaArr = location.split(":");
// jQuery("#storeAddress").val(locaArr[1]);
if (locaArr[1].indexOf("市") >= 0) {
var cityArr = locaArr[1].split("市");
jQuery("#searchtext").val(cityArr[1]);
}
jQuery("#lng").text(lng);
jQuery("#lat").text(lat);
dialog("已更換位置：" + locaArr[1] + ", 您可經過提交修改進行保存");
}
}
//點擊搜索事件"我在這裏"(不能傳中文參數)
var addressOfSearch;
function iAmThereOfSearch(obj, lng, lat) {
var province = jQuery(".BMap_bubble_content form input:eq(0)").val();
var city = jQuery(".BMap_bubble_content form input:eq(1)").val();
var address = jQuery(".BMap_bubble_content form input:eq(2)").val();
/*alert(province);
alert(city);
alert(address);*/
decideMunicipalities(province, city, address);
// jQuery("#storeAddress").val(addressOfSearch);
if (addressOfSearch.indexOf("市") >= 0) {
var cityArr = addressOfSearch.split("市");
jQuery("#searchtext").val(cityArr[1]);
}
jQuery("#lng").text(lng);
jQuery("#lat").text(lat);
dialog("已更換位置：" + addressOfSearch + ", 您可經過提交修改進行保存");
}
//判斷省市是不是同樣的(直轄市是同樣的)
function decideMunicipalities(province, city, address) {
if (province == city) {
/*
* 判斷完直轄市(省和市相同)以後，再判斷下市和街
* eg: city : 深圳市, address : 深圳市華強北街道辦
*/
var index = address.indexOf(city);
if (index != -1) {
var addressArr = address.split(city);
if (addressArr.length >= 2) {
address = addressArr[1];
} else {
address = " ";
}
}
addressOfSearch = address;
} else {
/*
* 判斷完直轄市(省和市相同)以後，再判斷下市和街
* eg: city : 深圳市, address : 深圳市華強北街道辦
*/
var index = address.indexOf(city);
if (index != -1) {
var addressArr = address.split(city);
if (addressArr.length >= 2) {
address = addressArr[1];
} else {
address = " ";
}
}
addressOfSearch = province + city + address;
}
}
//保存地理位置和座標到頁面上，以供修改保存使用(點擊"我在這裏觸發")
function tempSaveLocation(address, lng, lat) {
// jQuery("#storeAddress").val(address);
if (address.indexOf("市") >= 0) {
var cityArr = address.split("市");
jQuery("#searchtext").val(cityArr[1]);
}
jQuery("#lng").text(lng);
jQuery("#lat").text(lat);
dialog("已更換位置：" + address + ", 您可經過提交修改進行保存");
}
上面一大段js核心就前面幾句js，後面的一系列都是根據業務需求寫的函數，還有保存座標，判斷直轄市等一系列坑爹的方法，直接複製個人代碼是不能運行的，須要慢慢理解。也就是首先調用百度api申明地圖（new BMap.Map("map")），再描點（var point = new BMap.Point(116.4135540000,39.9110130000); ），再作初始化地圖（map.centerAndZoom(point, 15);）， 再申明覆蓋物（var marker = new BMap.Marker(point);）， 再把覆蓋物添加到那個point點上去（map.addOverlay(marker);）。基礎差很少就這些吧。git
百度有些官方示例：http://developer.baidu.com/map/jsdemo.htm#a1_2
ajax
再者就是肯定員工位置了，我作的是在頁面上用html5進行定位數據庫
引用的是W3C資料：http://www.w3school.com.cn/html5/html_5_geolocation.aspjson
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
有個要注意的地方，這裏獲取的座標是GPS座標，然而以前保存的商戶座標百度座標，這兩個是不一樣的，須要轉換一下。我選擇的是把員工的GPS座標轉成百度座標再計算距離。api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地圖密鑰"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
var globalGPSLongitude;
var globalGPSLatitude;
var globalBaiDuLongitude;
var globalBaiDuLatitude;
BMap.Convertor.translate(new BMap.Point(globalGPSLongitude, globalGPSLatitude), 0, initMap); //轉換座標
function initMap(point){
globalBaiDuLatitude = point.lat;
globalBaiDuLongitude = point.lng;
}
上面的globalBaiDuLongitude, globalBaiDuLatitude是GPS座標轉換成的百度座標。瀏覽器