附：百度地图API：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a1b0?qq-pf-to=pcqq.c2c
<%@page import="com.topinfo.common.util.SessionUtils"%>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%@page import="com.topinfo.base.entity.Enterprise"%>
<%@page import="com.topinfo.bstek.yqyd.entmap.pr.EntmapPR"%>
<%@page import="com.bstek.bdf2.core.context.ContextHolder"%>
<%@page import="java.util.Map"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<script type="text/javascript" src="<%=application.getContextPath()%>/js/jquery-1.8.2.min.js"></script>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
.map_header{height:100px;position:relative;border-bottom:#ccc solid 1px;}
.map_header a{position:absolute;display:block;height:50px;line-height:50px;bottom:10px;left:10px;font-size:12px;background:url(images/markA.png) no-repeat;padding-left:17px;color:#2A2A81;}
.map_header p{position:absolute;right:10px;height:60px;font-size:12px;line-height:20px;padding:5px;background:#FDFCC3;border:#E5CE5C solid 1px;border-radius:10px;color:#ff0000;}
</style>
<script src=" http://api.tianditu.com/api?v=4.0" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
var isMaintain='${ent.isMaintain}';
if(isMaintain=="true"){
document.getElementById("show").style.display="";
}else{
document.getElementById("show").style.display="none";
}
}
</script>
</head>
<body>
<div class="map_header" id="show">
<a href="#" class="bz" title="" onclick="biaoji();"> 位置标注</a>
<a href="#" class="sdsz" title="" style="left:80px;background:none;" > 手动设置经纬度</a>
<p>
提示：若要重新标注企业位置，则按以下步骤操作：<br/>1、点击左上角“位置标注”<br/>2、拖动气泡，当气泡拖动到您企业所在的位置后，松开鼠标
</p>
</div>
<div id="aaaa" style="display:none;position:absolute;z-index:99999999;260px;height:220px;left:50%;top:50%;margin-left:-150px;margin-top:-130px;border:#ddd solid 1px;background:#ccc;padding:20px;">
<table class="x1-layout">
<tr>
<td class="label">纬度：</td>
<td class="c1">
<input id="stwd" value="${ent.entLatitude}" />
</td>
</tr>
<tr>
<td class="label">经度：</td>
<td class="c1">
<input id="stjd" value="${ent.entLongitude}"/>
</td>
</tr>
<tr>
<td colspan="2"> <p>
举例说明：<br/>经纬度坐标“35.232851,109.9333”，其中 35.232851表示纬度，109.9333表示经度
</p></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;">
<input type="button" value="保存" id="save" >
<input type="button" value="关闭" id="close" >
</td>
</tr>
</table>
</div>
<div id="container"></div>
<input id="entName" type="hidden" value="${ent.enterpriseName }"/>
<input id="jd" type="hidden" value="${ent.entLongitude}"/>
<input id="wd" type="hidden" value="${ent.entLatitude}"/>
<input id="entId" type="hidden" value="${ent.enterpriseId}"/>
<script type="text/javascript">
$(function(){
$(".sdsz").click(function(){
$("#aaaa").show();
});
$("#close").click(function(){
$("#aaaa").hide();
return false;
})
$("#save").click(function(){
var entId = document.getElementById("entId").value;
var stjd=document.getElementById("stjd").value;
var stwd=document.getElementById("stwd").value;
updateJwd(entId,stjd,stwd);
})
});
var map = new T.Map("container"); //初始化地图对象
map.centerAndZoom(new T.LngLat(120.059538,28.69158), 13);//定义一个中心点坐标
//创建缩放平移控件对象
control = new T.Control.Zoom();
//添加缩放平移控件
map.addControl(control);
var marker =null;
var icon = new T.Icon({
iconUrl: "images/markA.png",
iconSize: new T.Point(19, 27),
iconAnchor: new T.Point(10, 25)
});
// 创建地图实例
var jd = $("#jd").val();
var wd = $("#wd").val();
var marker =null;
if ( (jd.length !=0 && jd !='null' )||( wd.length !=0 && wd !='null')){
var point= new T.LngLat(jd,wd);
marker = new T.Marker(point, {icon:icon});
map.addOverLay(marker);
marker.addEventListener("click", function(){
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
enableMessage:false //不允许发送短信
};
var name= document.getElementById("entName").value;
var infoWin = new T.InfoWindow();
infoWin.setLngLat(point);
infoWin.setContent("企业名称："+name, opts);
map.addOverLay(infoWin);
});
marker.addEventListener("dragend", function(e){
if(window.confirm("确定标记该处？")){
marker.disableDragging();
document.getElementById("jd").value = e.lnglat.getLng();
document.getElementById("wd").value = e.lnglat.getLat();
var entId = document.getElementById("entId").value;
updateMark(entId,e.lnglat.getLng(),e.lnglat.getLat());
marker.enableDragging();
}
});
}else{
}
function updateMark(id,jd,wd){
$.post("updateMark.action",
{
id:id,
longitude:jd,
latitude:wd
},
function(status){
window.top.dorado.widget.NotifyTipManager.notify('标记成功！');
window.location.reload(true);
});
}
function updateJwd(id,jd,wd){
$.post("updateMark.action",
{
id:id,
longitude:jd,
latitude:wd
},
function(status){
window.top.dorado.widget.NotifyTipManager.notify('经纬度保存成功！');
window.location.reload(true);
});
}
function biaoji(){
if (marker != null){
marker.enableDragging();
}else{
marker= new T.Marker(new T.LngLat(120.059538,28.69158), {icon:icon});
map.addOverLay(marker);
marker.enableDragging();
marker.addEventListener("click", function(){
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
enableMessage:false //不允许发送短信
};
var name= document.getElementById("entName").value;
var infoWin = new T.InfoWindow();
infoWin.setLngLat(new T.LngLat(120.059538,28.69158));
infoWin.setContent("企业名称："+name, opts);
map.addOverLay(infoWin);
});
marker.addEventListener("dragend", function(e){
if(window.confirm("确定标记该处？")){
marker.disableDragging();
document.getElementById("jd").value = e.lnglat.getLng();
document.getElementById("wd").value = e.lnglat.getLat();
var entId = document.getElementById("entId").value;
updateMark(entId,e.lnglat.getLng(),e.lnglat.getLat());
}
});
}
}
</script>
</body>
</html>