学步园

创建已知坐标面

html代码：

<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>

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, infoWin, polygon, centerPoint, maxPoint;
        var maxPointLat, minPointLat, maxPointLng, minPointLng;
        function onLoad() {

	//关键的点集合
            var points = [];
            points.push(new TLngLat(104.06027, 30.65958));
            points.push(new TLngLat(104.06113, 30.66043));
            points.push(new TLngLat(104.06137, 30.65954));
            points.push(new TLngLat(104.06042, 30.65887));
	//获取多边形的最中心点的坐标 new TLngLat(lng, lat)

            maxPointLat = points[0].getLat();
            minPointLat = points[0].getLat();
            for (var i = 0; i < points.length; i++) {
                if (maxPointLat <= points[i].getLat()) {
                    maxPointLat = points[i].getLat();
                    maxPoint = points[i];
                }
                else if (minPointLat >= points[i].getLat()) {
                    minPointLat = points[i].getLat();
                }
            }

            maxPointLng = points[0].getLng();
            minPointLng = points[0].getLng();
            for (var i = 0; i < points.length; i++) {
                if (maxPointLng <= points[i].getLng()) {
                    maxPointLng = points[i].getLng();
                }
                else if (minPointLng >= points[i].getLng()) {
                    minPointLng = points[i].getLng();
                }
            }
            var lat = minPointLat + (maxPointLat - minPointLat) / 2;
            var lng = minPointLng + (maxPointLng - minPointLng) / 2;
            map = new TMap("mapDiv");
            map.centerAndZoom(new TLngLat(lng, lat), zoom);
            map.enableHandleMouseScroll();


            polygon = new TPolygon(points, { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5, fillOpacity: 0.5 });
            map.addOverLay(polygon);
            TEvent.addListener(polygon, "click", onClick);

            ShowInfoWindow();
        }

        function onClick() {
            infoWin.closeInfoWindow();
            ShowInfoWindow();
        }

	//单机显示相关信息 类似于ArcGIS Server的InfoWindow
        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(maxPoint, new TPixel(9, 27));
            infoWin.setOffset(new TPixel(0, 0));
            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>

后端只需要将数据传过来进行循环来添加到points数组中

效果图如下:

至于这句代码，详情请看国家天地图API 创建点 覆盖物最后面

var top = $("#div").offset().top;
            if (top < 0) {
                map.panBy(new TSize(0, -50 + top));
            }