<tr><td width=’16%’ height=25 bgcolor=’ffffff’>标注地图</td>

<td bgcolor=’ffffff’><a href=”javascript:void(0)” onclick=”showOrHide(1)”>点击地图标注</a></td></tr>

<style>

.belowdiv{

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100% !important; width:100%;

height: 100% !important; _height:1024px;

background-color: gray;

filter:alpha(opacity=20); opacity:0.2;

z-index:1001;

}

.topdiv {

display: none;

position: absolute;

top: 25%;

left: 25%;

width: 582px;

height: 450px;

padding: 16px;

border-top:solid,16px,red;

border-left:1px;

border-right:1px;

border-bottom:1px;

background-color: white;

z-index:1002;

overflow: auto;

}

</style>

<script type="text/javascript">

function showOrHide(flag) {

if(flag == 1) {

document.getElementById("top").style.display = "block";

document.getElementById("below").style.display = "block";

}

if(flag == 2) {

document.getElementById("top").style.display = "none";

document.getElementById("below").style.display = "none";

}

}

</script>

<div id="top" class="topdiv">

当前坐标：[!--map_x--] – [!--map_y--] 缩放：[!--map_z--] &nbsp;&nbsp;<a href = "javascript:void(0)" onclick = "showOrHide(2)">提交</a>

<div style="width:520px;height:340px;border:1px solid gray" id="container">

</div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

<script type="text/javascript">

var map = new BMap.Map("container");

var point = new BMap.Point(115.449106, 38.887932);   //初始位置，我这个是保定可能是css原因，这个坐标位置偏移一点

map.addControl(new BMap.NavigationControl());  //鱼骨控件显示

map.enableScrollWheelZoom();

map.centerAndZoom(point, 14);   //初始缩放级别

// 获取经度  纬度

map.addEventListener("click", function(e){

   document.getElementById("map_x").value=e.point.lng;

  document.getElementById("map_y").value=e.point.lat;

//下面这行是点击提示语，需要可以去掉 "//"

//  alert("系统已记录您标注的位置坐标");

});

// 获取缩放

map.addEventListener("zoomend", function(){

  document.getElementById("map_z").value=this.getZoom();

});

// 设置个默认点，移动这个图标也可以获得坐标。不想要也可以删除

var point = new BMap.Point(115.487362, 38.868383);  // 默认标注图标位置

var marker = new BMap.Marker(point);        // 创建标注

map.addOverlay(marker);    // 将标注添加到地图中

var opts = {

  width : 250,     // 信息窗口宽度

  height: 100,     // 信息窗口高度

  title : "温馨提示"  // 信息窗口标题

}

var infoWindow = new BMap.InfoWindow("您可以移动此图标到您所在位置或点击您所在的位置，系统会自动获得坐标", opts);  // 创建信息窗口对象

marker.addEventListener("click", function(){

   this.openInfoWindow(infoWindow);

});

// 移动获取坐标

marker.enableDragging();

marker.addEventListener("dragend", function(e){

  document.getElementById("map_x").value=e.point.lng; //移动中心点改变坐标

  document.getElementById("map_y").value=e.point.lat;

//下面这行是移动坐标提示语，需要可以去掉 "//"

// alert("系统已记录您当前位置坐标：" + e.point.lng + ", " + e.point.lat + "");

});

</script>

</div>

<div id="below" class="belowdiv"></div>

<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.2″></script>

<div style=”width:520px;height:340px;border:1px solid gray” id=”container”></div>

<script type=”text/javascript”>

var sContent =

“<h4 style=’margin:0 0 5px 0;padding:0.2em 0′>[!--title--]</h4>” +

“<img style=’float:right;margin:4px’ id=’imgDemo’ src=’[!--titlepic--]‘ width=’139′ height=’104′ title=’[!--title--]‘/>” +

“<p style=’margin:0;line-height:1.5;font-size:13px;text-indent:2em;width:320px;’>[!--smalltext--]…</p>” +

“</div>”;

var map = new BMap.Map(“container”);

var point = new BMap.Point([!--map_x--], [!--map_y--]);

var marker = new BMap.Marker(point);

var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象

map.centerAndZoom(point, [!--map_z--]);

map.addOverlay(marker);

marker.addEventListener(“click”, function(){

this.openInfoWindow(infoWindow);

//图片加载完毕重绘infowindow

document.getElementById(‘imgDemo’).onload = function (){

infoWindow.redraw();

}

});

</script>