天地图实现标注，搜索，缩放，比例尺，切换类型功能

最新推荐文章于 2024-03-15 09:30:58 发布

huang_jin_yi_

最新推荐文章于 2024-03-15 09:30:58 发布

阅读量5.3k

点赞数

分类专栏：前端

前端专栏收录该内容

90 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    <title>天地图－地图API－范例－纯文字的信息窗口</title>
    <script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>
    <style type="text/css">
        body, html{
            width: 100%;
            height: 100%;
            margin:0;
        }
        #map{
            height:400px;
            width:100%;
        }
        .jishou,.host,.build{
            text-align: center;
            cursor: pointer;
        }
    </style>
    <script>
        var map, marker,localsearch;
        var zoom = 10 ;
        function onLoad() {
            //初始化地图对象
            map = new T.Map("map");
            //允许鼠标滚轮缩放地图
            map.enableScrollWheelZoom();
            //创建比例尺控件对象
            var scale = new T.Control.Scale();
            //添加比例尺控件
            map.addControl(scale);
             //创建缩放平移控件对象
            control = new T.Control.Zoom();
            //创建地图类型切换对象
            var ctrl = new T.Control.MapType();
            //添加控件
            map.addControl(ctrl);
            //添加缩放平移控件
            map.addControl(control);
            //设置显示地图的中心点和级别 吉首市政府为中心
            map.centerAndZoom(new T.LngLat(109.593424, 28.32429), zoom);
            var point = new T.LngLat(109.593424, 28.32429);
           var config = {
                onSearchComplete: localSearchResult //接收数据结果
            };
            //创建搜索对象
            localsearch = new T.LocalSearch(map, config);
        }

        function localSearchResult(result) {
            console.log(result.getPois())
            //解析点数据结果
            pois(result.getPois());
        }

        //解析点数据结果
        function pois(obj) {
            if (obj) {
                //显示搜索列表
                var divMarker = document.createElement("div");
                //坐标数组，设置最佳比例尺时会用到
                var zoomArr = [];
                for (var i = 0; i < obj.length; i++) {
                    //闭包
                    (function (i) {
                        //名称
                        var name = obj[i].name;
                        //地址
                        var address = obj[i].address;
                        //坐标
                        var lnglatArr = obj[i].lonlat.split(" ");
                        var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                        var winHtml = "名称:" + name + "<br/>地址:" + address;
                        //创建标注对象
                        var marker = new T.Marker(lnglat);
                        //地图上添加标注点
                        map.addOverLay(marker);
                        //注册标注点的点击事件
                        var markerInfoWin = new T.InfoWindow(winHtml, {autoPan: true});
                        marker.addEventListener("click", function () {
                            marker.openInfoWindow(markerInfoWin);
                        });
                        marker.openInfoWindow(markerInfoWin);
                        zoomArr.push(lnglat);
                    })(i);
                }
                //显示地图的最佳级别
                map.setViewport(zoomArr);
            }
        }
    </script>
</head>
<body onLoad="onLoad()">
    <div id="map"></div>
    <div class="jishou">双江寺</div>
    <div class="host">吉首市政府</div>
    <div class="build">水利大厦</div>
    <script type="text/javascript" src="map/jquery.js"></script>  // 添加自己的
    <script type="text/javascript">
        $(function() {
            $(".jishou,.host,.build").click(function(event) {
                console.log($(this).text());
                localsearch.search($(this).text())
            });
        });
    </script>
</body>
</html>

添加自己的jquery就可以直接查看效果

huang_jin_yi_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
天地图实现标注，搜索，缩放，比例尺，切换类型功能

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;天地图－地图API－范例－纯文字的信息窗口&lt;/title&gt; &lt;script type="text/
复制链接

扫一扫