pangdongxu
/
official_website


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://api.tianditu.com/api?v=4.0&tk=cc4aba6e967096098249efa069733067"></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>
————————————————
版权声明：本文为CSDN博主「爱吃芒果2」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_52072568/article/details/127391217