先上效果图
html代码：
<body onload="onLoad()"> <div style="position: absolute; float: left; margin-left: 23%; margin-top: 1%; z-index: 500;"> <input type="button" onclick="vector()" value="矢 量" /> <input type="button" onclick="satellite()" value="影 像" /> <input type="button" onclick="hybrid()" value="混 合" /> </div> <div id="map" ondblclick="ShowInfoWindow()" style="border: 1px solid black; position: absolute; width: 81%; height: 95%; margin-left: 19%;"> </div> <span id="info" style="position: absolute; float: left; border: 2px solid black; width: 18%;"></span> <div id="div" style="position: absolute; border: 2px solid black; height: 95%; width: 18%;"> <br /> <p> <label id="lab"> </label> <br /> <span id="info2" style="position: relative;"></span> </p> </div> </body>
javascript代码：
<script src="JScript/jquery1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
<script type="text/javascript">
var map, zoom = 18, mapdraw, mapclick;
var polygonTool;
var count = 0, geometry = 0;
var polygonPoints = [];
var polygon;
var bool = 0;
var drag = false;
var infoWin;
function onLoad() {
$(function () {
document.onkeydown = killesc;
})
function killesc() {
polygonTool.open();
$("#info2").text("");
$("#lab").text("");
polygonPoints = [];
drag = false;
}
map = new TMap("map");
map.centerAndZoom(new TLngLat(104.06321, 30.65983), zoom);
map.enableHandleMouseScroll();
TEvent.addListener(map, "mousemove", function (p) {
debugger;
var lnglat = map.fromContainerPixelToLngLat(p);
$("#info").text("当前鼠标坐标:" + lnglat.getLng() + " , " + lnglat.getLat());
//当鼠标移动到上下左右 边缘时 地图自动拖动
if (drag == true) {
var bs = map.getBounds(); //获取可视区域
var bssw = bs.getSouthWest(); //可视区域左下角
var bsne = bs.getNorthEast(); //可视区域右上角
var distancelat = bsne.getLat() - bssw.getLat();
var distancelng = bsne.getLng() - bssw.getLng();
if (lnglat.getLat() > (bsne.getLat() - distancelat / 25)) {
map.panBy(new TSize(0, -100));
}
if (lnglat.getLat() < (bssw.getLat() + distancelat / 25)) {
map.panBy(new TSize(0, 100));
}
if (lnglat.getLng() > (bsne.getLng() - distancelng / 30)) {
map.panBy(new TSize(100, 0));
}
if (lnglat.getLng() < (bssw.getLng() + distancelng / 30)) {
map.panBy(new TSize(-100, 0));
}
}
});
var config = {
strokeColor: "blue", //折线颜色
fillColor: "#FFFFFF", //填充颜色。当参数为空时，折线覆盖物将没有填充效果
strokeWeight: "3px", //折线的宽度，以像素为单位
strokeOpacity: 0.5, //折线的透明度，取值范围0 - 1
fillOpacity: 0.5 //填充的透明度，取值范围0 - 1
};
polygonTool = new TPolygonTool(map, config);
polygonTool.open();
polygonTool.setTips("双击结束,右键移动");
polygonTool.showLabel = false;
mapdraw = TEvent.addListener(polygonTool, "draw", onDrawPolygon);
function onDrawPolygon(bounds, line) {
polygon = new TPolygon(bounds, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5, fillOpacity: 0.5 });
map.addOverLay(polygon);
TEvent.addListener(polygon, "click", onClickPolygon);
polygonTool.close();
}
//单机多边形，显示自定义的信息窗口
function onClickPolygon() {
map.addOverLay(infoWin);
}
//用mouseup 不用click是因为在拖动的时候也会添加点，所有用mouseup可以确定拖动后鼠标添加点的位置
mapclick = TEvent.addListener(map, "mouseup", function (p) {
//将像素坐标转换成经纬度坐标
if (event.button == 2) {
return;
}
if (bool == 1) {
return;
}
drag = true;
var lnglat = map.fromContainerPixelToLngLat(p);
var lng = lnglat.getLng();
var lat = lnglat.getLat();
if (count != geometry) {
geometry = count;
$("#info2").text("");
polygonPoints = [];
}
polygonPoints.push(new TLngLat(lng, lat));
var val = $("#info2").text();
$("#info2").text(val + "\n" + lng + "," + lat);
$("#lab").text("共" + polygonPoints.length + "点");
});
}
//删除多边形，和左边的text
function ClearOverLay() {
map.clearOverLays();
polygonTool.open();
$("#info2").text("");
$("#lab").text("");
bool = 0;
polygonPoints = [];
}
//显示信息窗口
function ShowInfoWindow() {
var area = map.getArea(polygonPoints) / 100;
var html = [];
html.push('<div id="div" style=" height:40px; width:130px;">');
html.push('<table style=" width:100%;height:100%;">');
html.push('<tbody>');
html.push('<tr><td style=" font-size:14px; font-weight:bold;"><center>面积:</center></td><td style=" font-size:14px;">' + area + ' 亩</td></tr>');
html.push('<tr><td colspan=2><a href="#" style=" margin-top:8px; font-size:12px; float:right;" onclick="ClearOverLay()">删除</a></td></tr>');
html.push('</tbody>');
html.push('</table>');
html.push('</div>');
var lnglat = polygonPoints[polygonPoints.length - 1];
infoWin = new TInfoWindow(lnglat, new TPixel([0, -34]));
infoWin.setLabel(html.join(' '));
map.addOverLay(infoWin);
//防止InfoWindow被卡住
var top = $("#div").offset().top;
if (top < 0) {
map.panBy(new TSize(0, -50 + top));
}
bool = 1;
drag = false;
}
//下面三个方法是切换底图模式
function satellite() {
map.setMapType(TMAP_SATELLITE_MAP);
}
function vector() {
map.setMapType(TMAP_NORMAL_MAP);
}
function hybrid() {
map.setMapType(TMAP_HYBRID_MAP);
}
</script>