国家天地图API 创建点覆盖物

来源：互联网发布：动力it 编辑：程序博客网时间：2024/05/18 00:10

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));            }

会出现下面情况

信息窗口被卡主了！

0 0

国家天地图API 创建点 覆盖物

国家天地图API 创建点覆盖物