html 代码
<body onload="onLoad()">
<div style="position: absolute; float: left; margin-left: 5%; 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="mapDiv" style="position: absolute; width: 99%; height: 99%">
</div>
</body>
js代码
<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
<script type="text/javascript">
var map, zoom = 18, infoWin;
var point = new TLngLat(104.06332, 30.65986);
function onLoad() {
map = new TMap("mapDiv");
map.centerAndZoom(point, zoom);
map.enableHandleMouseScroll();
var icon = new TIcon("Images/markerA.png", new TSize(28, 40), { anchor: new TPixel(9, 27) });
//point 点位置TLngLat类型 var marker = new TMarker(point, { icon: icon }); map.addOverLay(marker); TEvent.addListener(marker, "click", onClick); ShowInfoWindow(); } function onClick() { infoWin.closeInfoWindow(); ShowInfoWindow(); } function ShowInfoWindow() { var html = []; html.push('<div id="div" style="width: 300px; height: 150px; ">'); html.push('<table style=" border-collapse: separate; border-spacing: 10px;font-size:14px;margin-top:-10px;">'); html.push('<tr><td><center style=" font-weight:bold;text-align:left;">地址:</center></td><td style="text-align:left;">四川省成都市天府广场</td></tr>'); html.push('<tr><td><center style=" font-weight:bold;text-align:left;">类型:</center></td><td>承包地</td></tr>'); html.push('<tr><td><center style=" font-weight:bold;text-align:left;">面积:</center></td><td>880亩</td></tr>'); html.push('<tr><td><center style=" font-weight:bold;text-align:left;">价格:</center></td><td>120000元</td></tr>'); html.push('<tr><td><center style=" font-weight:bold;text-align:left;">产权人:</center></td><td>成都市政府</td></tr>'); html.push('<tr><td><center style=" font-weight:bold;text-align:left;">联系电话:</center></td><td>12306</td></tr>'); html.push('</table>'); html.push('</div>'); infoWin = new TInfoWindow(point, new TPixel(9, 27));
//自定义信息窗体偏移 infoWin.setOffset(new TPixel(2, -25)); infoWin.setLabel(html.join(' ')); map.addOverLay(infoWin);
//自动将自定义的信息窗体
var top = $("#div").offset().top;
if (top < 0) {
map.panBy(new TSize(0, -50 + top));
}
}
function satellite() {
map.setMapType(TMAP_SATELLITE_MAP);
}
function vector() {
map.setMapType(TMAP_NORMAL_MAP);
}
function hybrid() {
map.setMapType(TMAP_HYBRID_MAP);
}
</script>
如果不写
var top = $("#div").offset().top;
if (top < 0) {
map.panBy(new TSize(0, -50 + top));
}
会出现下面情况
信息窗口被卡主了！
