天地图添加点聚合以及点信息

最新推荐文章于 2024-05-23 16:25:43 发布

是锦

最新推荐文章于 2024-05-23 16:25:43 发布

阅读量286

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_45725784/article/details/134724929

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天地图添加点聚合以及点信息</title>
    <script type="text/javascript" src="http://api.tianditu.com/api?v=4.0&tk=秘钥"></script>
    <script>
        var map,control;
        function onLoad() {
            // 初始化地图对象
            map = new T.Map('mapDiv');
            // 设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(117.985096, 37.3801), 8);


            // 允许鼠标滚轮缩放地图
            map.enableScrollWheelZoom();

/*
            //添加鹰眼控件
            var miniMap = new T.Control.OverviewMap({
                isOpen: true,
                size: new T.Point(150, 150)
            });
            map.addControl(miniMap);
 */
            // 创建比例尺控件对象
            var scale = new T.Control.Scale();
            // 添加比例尺控件
            map.addControl(scale);


            // 创建缩放平移控件对象
            control = new T.Control.Zoom();
            // 添加缩放平移控件
            map.addControl(control);
            control.setPosition(T_ANCHOR_TOP_RIGHT);


            // 创建标记图片对象（支持更换图标）
            var icon = new T.Icon({
                iconUrl: "http://api.tianditu.com/img/map/markerA.png",
                iconSize: new T.Point(19, 27),
                iconAnchor: new T.Point(10, 25)
            });

            // 后台要传来的json数据（测试数据）
            var jsonStr = "[{'longitude':'117.976101','latitude':'37.418297','address':'滨州','code':'yykj','waterRight':'1300','waterConsumption':'620','state':'0'},{'longitude':'117.985650','latitude':'37.379740','address':'a区','code':'xdgj'}]";

            // json串转json对象
            var json = eval('(' + jsonStr + ')');

            var marker,content;
            // 循环获取json数据
            for (var i = 0; i < json.length; i++) {
                // 创建标注
                marker = new T.Marker(new T.LngLat(json[i].longitude,json[i].latitude),{icon: icon});
                // 准备标注信息
                content = "点击信息";

                // 将标注添加到地图中
                map.addOverLay(marker);
                // 为标注添加点击事件
                addClickHandler(content,marker);

            }

            function addClickHandler(content,marker){
                // 为标注添加点击事件
                marker.addEventListener("click",function(e){
                    openInfo(content,e);
                }
            );}

            function openInfo(content,e){
                // 获取标注的经纬坐标
                var point = e.lnglat;
                // 创建标注
                marker = new T.Marker(point);
                // 创建信息窗口对象
                var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-20)});
                // 开启信息窗口
                map.openInfoWindow(markerInfoWin,point);

            }
        }

    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" style="position:absolute;width:1400px; height:500px"></div>
</body>
</html>