地图能够先作好静态页面在嵌入到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坐标转换成的百度坐标。浏览器