今天把公司的ERP项目中引入百度地图的任务搞定了,感觉很开心。希望再接再厉吧。fight.
不多说,先贴代码
<script type="text/javascript">
$('#location').on('click',function(){
layer.open({//调用layer弹出层
type: 2,
title: '地图位置',
scrollbar: false,
maxmin: false,
shadeClose: false, //点击遮罩关闭层
area : ['1000px' , '500px'],
content: '${ctx}/office.action?method:getLocation'
});
});
</script>
通过调用layer弹出框到’${ctx}/office.action?method:getLocation’即执行OfficeAction下的getLocation方法,通过getLocation的返回值映射到对应的jsp文件。显示出视图
<%@ page language="java" pageEncoding="utf-8" import="java.util.*"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>百度地图API</title>
<%@ include file="/common/meta_ace.jsp"%>
<!--css-->
<!--javascript-->
</head>
<body>
<%
String lon = request.getParameter("lon");
String lat = request.getParameter("lat");
String x="";
String y="";
if(lon != null && !lon.isEmpty()&&!lat.isEmpty()){
double[] lonlat={Double.parseDouble(lon),Double.parseDouble(lat)};
double[] coordinate=AppUtils.lonlatToMapXY(lonlat);
x=coordinate[0]+"";
y=coordinate[1]+"";
}
String address = request.getParameter("address");
%>
<input id="map_lontitude" type="hidden" value=<%=lon%> />
<input id="map_latitude" type="hidden" value=<%=lat%> />
<input id="map_x" type="hidden" value=<%=x%> />
<input id="map_y" type="hidden" value=<%=y%> />
<input id="address" type="hidden" value=<%=address%> />
<form action="${ ctx}/erp/office.action" method="post">
<input type="hidden" name="pageNo" value="${ param.pageNo}"/>
<input type="hidden" name="pageSize" value="${ param.pageSize}"/>
<input type="hidden" name="conditionStr" value="${ conditionStr}"/>
<input type="hidden" name="office.id" value="${ office.id}"/>
<div class="main-container">
<div style="width: 730px; margin: auto;">
<input type="text" name="office.address" id="office_address" value="${ office.address}" class="input-large "/>
<button type="button" id="location" onclick="search()" class="btn btn-sm btn-primary" title="地图显示该客户位置 ">
搜索
</button>
查询结果(经纬度):<input id="result_" type="text" />
<button type="submit" id="confirm" class="btn btn-sm btn-primary savaBtn" name="method:save">确认</button>
<div id="container"
style="position: relative; width: 730px; height: 590px; border: 1px solid gray; overflow: hidden;">
</div>
</div>
</div>
</body>
<script type="text/javascript">
var lontitude = document.getElementById("map_lontitude").value;
var latitude = document.getElementById("map_latitude").value;
var mapx = document.getElementById("map_x").value;
var mapy = document.getElementById("map_y").value;
var address = document.getElementById("address").value;
var ids=[];
var addrs=[];
var names=[];
var lons=[];
var lats=[];
var mapxs=[];
var mapys=[];
var keyword ;
var local ;
var lng;
var lat;
var newaddress;
//关键字搜索
function search(){
keyword = document.getElementById("office_address").value;
local.search(keyword);
}
function map_init1() {
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(mapx, mapy); //地图中心点
map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
local = new BMap.LocalSearch(map, {renderOptions:{map: map}});
local.enableAutoViewport(); //允许自动调节窗体大小
map.clearOverlays();//清空原来的标注
local.setSearchCompleteCallback(function (searchResult) {
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{"input" : "office_address"
,"location" : map
});
var poi = searchResult.getPoi(0);
document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
map.centerAndZoom(poi.point, 13);
map.enableScrollWheelZoom(true); //启用滚轮放大缩小
//向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor : BMAP_ANCHOR_TOP_LEFT,
type : BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen : 1
});
map.addControl(ctrlOve);
//向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor : BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
var myIcon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25), // 指定定位位置
imageOffset: new BMap.Size(0, 0 - 1* 20) // 设置图片偏移
});
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat),{icon: myIcon}); // 创建标注,为要查询的地方对应的经纬度
map.addOverlay(marker);
<%--var content = document.getElementById("office_address").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");--%>
marker.enableDragging(); //设置可拖拽
var geoc = new BMap.Geocoder();
marker.addEventListener("dragend", function(e) { //拖动事件
var pt = e.point;
var dizhi;
geoc.getLocation(pt, function(rs) {
var addComp = rs.addressComponents;
dizhi = addComp.city + addComp.district
+ addComp.street + addComp.streetNumber;
document.getElementById('office_address').value = dizhi;//更新地址数据
var content = dizhi + "<br/><br/>经度:" + e.point.lng
+ "<br/>纬度:" + e.point.lat;
var infoWindow = new BMap.InfoWindow(
"<p style='font-size:14px;'>" + content
+ "</p>");
marker.openInfoWindow(infoWindow, map.getCenter());//将经纬度信息显示在提示框内
});
document.getElementById("result_").value = e.point.lng
+ ", " + e.point.lat;//打印拖动结束坐标
});
<%--marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });--%>
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
});
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=2.0&ak=82a696555f77c2afe26c32007de3800e&callback=map_init1()";
document.body.appendChild(load);
}
window.onload = map_load;
</script>
</form>
</html>
效果为,可以生成一个自定义的标注,并且可以拖动标注,在拖动的同时,会自动生成对应的经纬度。这个不错,对于需要精确定位的比较有用。