调用天地图API实现关键词搜索

来源：互联网发布：贵州云博大数据编辑：程序博客网时间：2024/06/04 18:03
概述：
本文讲述结合天地图 js API，实现Openlayers中关键词的搜索与展示。
效果：
实现关键：
调用天地图APILocalSearch接口，实现关键词搜索，调用方式为：localsearch.search(keywod)。
完整代码：
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <title>OpenLayers MapQuest Demo</title>    <link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">    <script src=" http://api.tianditu.com/api?v=4.0" type="text/javascript"></script>    <script src="../../../plugin/jquery/jquery-3.1.1.min.js"></script>    <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>    <script src="public_map/TiandituLayer-src.js"></script>    <script src="extend/LabelMarkers.js"></script>    <script src="extend/LabelLayer.js"></script>    <style type="text/css">        html, body, #map{            padding:0;            margin:0;            height:100%;            width:100%;            overflow: hidden;            font-size: 12.5px;            font-family:"宋体"        }        .search-box{        position: absolute;        top:10px;        left:40%;        position: absolute;        z-index: 999;        padding: 5px;        border: 1px solid #ccc;        border-radius: 4px;        box-shadow: 1px 1px 1px #666;        background: #fff;        }        .item-list{            position: absolute;            top:100px;            left: 20px;            z-index: 999;            border: 1px solid #ccc;            width: 250px;            background: #fff;            display: none;        }        .list-close{            background: url("img/panel_tools.png");            width: 16px;            height: 16px;            float: right;            margin: 3px 3px;            background-position: -16px 0px;        }        .list-close:hover{            cursor: pointer;        }        .list-title{            background: #009dda;            color: #fff;            padding: 5px 8px;            font-weight: bold;        }        ul{            list-style: none;            margin: -0px 0;        }        ul li{            border-bottom: 1px dotted #eee;            margin-left: -40px;            margin-top: 5px;            position: relative;        }        ul li:hover{            background: #f2f2f2;        }        .item{            padding: 2px 5px;        }        .item:hover{            cursor: pointer;        }        .item-num{            position: absolute;            top: 0px;            left: 12px;            color: #fff;            font-weight: bold;            font-size: 15px;            font-family: 微软雅黑;        }        .item-title{            float: right;            font-weight: bold;            margin-right: 10px;        }        .item-content{            padding: 3px 5px;        }        .item-detail{            margin: 3px 5px;            float: right;        }        .item-detail:hover{            text-decoration: underline;            color: #01A4F8;            cursor: pointer;        }        .item-label{            color:#fff;            font-size: 15px;            font-weight: bold;            margin-top: 2px;            margin-left: 7px;        }        .item-label-name,.item-label-name-map{            border:1px solid #a6c9e2;            background: #fff;            padding: 3px 5px;            font-size: 12px;            margin-top: 23px;            margin-left: 15px;            border-radius: 5px;        }        .item-label-name-map{            margin-left: 25px;        }        .marker-label{            position: absolute;            left: 7px;            top: 0px;            color: #fff;            font-weight: bold;            font-size: 15px;            font-family: 微软雅黑;        }        .highlight-label{            position: absolute;            z-index: 999;            padding:3px 5px;            background: #fff;            border: 1px solid #999;            border-radius: 3px;            white-space:nowrap;        }                .page-ctrl{        border-top: 1px dotted #eee;        text-align: center;        padding: 3px;        }        .page-ctrl p a{        margin-top:5px ;        margin-right:5px ;        }        .page-ctrl p a.button:hover{        cursor: pointer;        text-decoration: underline;        }    </style>    <script type="text/javascript">        var map, markerLyr;        var localsearch;         function init(){            var vec_c = new OpenLayers.Layer.TiandituLayer("vec_c", "http://t0.tianditu.com/DataServer",{                mapType:"vec_c",                topLevel: 0,                bottomLevel: 18,                isBaseLayer:true,                isOnline:true,                mirrorUrls:[                    "http://t1.tianditu.com/DataServer",                    "http://t2.tianditu.com/DataServer",                    "http://t3.tianditu.com/DataServer",                    "http://t4.tianditu.com/DataServer",                    "http://t5.tianditu.com/DataServer",                    "http://t6.tianditu.com/DataServer",                    "http://t7.tianditu.com/DataServer"                ]            });            var cva_c = new OpenLayers.Layer.TiandituLayer("cva_c", "http://t0.tianditu.com/DataServer",{                mapType:"cva_c",                topLevel: 0,                bottomLevel: 18,                isBaseLayer:false,                isOnline:true            });            markerLyr = new OpenLayers.Layer.LabelMarkers("marker");            map = new OpenLayers.Map({                div: "map",                projection: "EPSG:4326",                layers: [cva_c,vec_c,markerLyr],                center: [116.40969,39.89945],                zoom: 12            });            map.addControl(new OpenLayers.Control.MousePosition());                        var config = { pageCapacity:8,//每页显示的数量 onSearchComplete:localSearchResult//接收数据的回调函数 }; var tdtmap=new T.Map("tdtmap"); tdtmap.centerAndZoom(new T.LngLat(116.40969,39.89945),12); //创建搜索对象 localsearch = new T.LocalSearch(tdtmap,config); $("#tdtmap").hide();$("#searchbtn").on("click",function(){var keywod = $("#keyword").val();localsearch.search(keywod);});        }                function localSearchResult(result){        //显示页数        $("#countdiv").html("共查询到"+result.count+"条记录");        $("#firstpage").on("click",function(){                localsearch.firstPage()            });            $("#prevpage").on("click",function(){                localsearch.previousPage()            });            $("#nextpage").on("click",function(){                localsearch.nextPage()            });            $("#lastpage").on("click",function(){                localsearch.lastPage()            });        $("#close").on("click",function(){                $(".item-list").hide();            });        $(".item-list").show();        var ul = $("#items").empty();        markerLyr.clearMarkers();        var size = new OpenLayers.Size(24,26);            var offset = new OpenLayers.Pixel(0, 0);        var pois = result.pois;        var xmin = 180,ymin = 90,xmax = 0,ymax = 0;        for(var i=0,len = pois.length;i<len;i++){        var poiData = pois[i];        var lonlat = poiData.lonlat.split(" ");        var poi = {        id:i,        poiid:poiData.hotPointID,        x:parseFloat(lonlat[0]),        y:parseFloat(lonlat[1]),        name:poiData.name,                    desc:poiData.address        }        xmin = xmin<poi.x?xmin:poi.x;        ymin = ymin<poi.y?ymin:poi.y;        xmax = xmax>poi.x?xmax:poi.x;        ymax = ymax>poi.y?ymax:poi.y;        /**                 * 地图内容                 */                var pt =  new OpenLayers.LonLat(poi.x, poi.y);                var icon = new OpenLayers.Icon('img/red.png',size,offset);                var feature = new OpenLayers.Feature(markerLyr,                        pt,                        {'icon': icon,'attr':poi});                var marker = feature.createMarker();                marker.attr = poi;                marker.id = i;                marker.events.register("click", feature, function(e){                    var data = e.object.attr;                    showInfowindow(data);                });                marker.events.register("mouseover", feature, function(e){                    map.layerContainerDiv.style.cursor = "pointer";                    var id= e.object.id;                    $("#img"+id).attr("src","img/blue.png");                    $("#li"+id).css("background","#f2f2f2");                    var data = e.object.attr;                    markerLyr.highMarkerById(data.id);                });                marker.events.register("mouseout", feature, function(e){                    map.layerContainerDiv.style.cursor = "default";                    var id= e.object.id;                    $("#img"+id).attr("src","img/red.png");                    $("#li"+id).css("background","#ffffff");                    markerLyr.highMarkerById("");                });                markerLyr.addMarker(marker);                /**                 * 列表内容                 */                var li = $("<li />").attr("id","li"+i).appendTo(ul);                var title = $("<div />").addClass("item").attr("i",i).data("attr",poi);                var img = $("<img />").attr("id","img"+i).attr("src", "img/red.png");                var num = $("<a />").addClass("item-num").html(i+1);                var name = $("<div />").addClass("item-title").html(poi.name);                title.append(img).append(num).append(name);                var content = $("<a />").addClass("item-content").html(poi.desc);                var detail = $("<a />").addClass("item-detail").html("详细>>");                li.append(title).append(content).append(detail);                title.on("mouseover",function(){                    var i = $(this).attr("i");                    $("#img"+i).attr("src","img/blue.png");                    var data = $(this).data("attr");                    markerLyr.highMarkerById(data.id);                     $("#li"+i).css("background","#f2f2f2");                });                title.on("mouseout",function(){                    var i = $(this).attr("i");                    $("#img"+i).attr("src","img/red.png");                    $("#li"+i).css("background","#fff");                    markerLyr.highMarkerById("");                });                title.on("click",function(){                    var data = $(this).data("attr");                    showInfowindow(data);                });        }        map.zoomToExtent(markerLyr.getDataExtent());        }        function showInfowindow(data){        markerLyr.highMarkerById(data.id);        }    </script></head><body onload="init()"><div id="tdtmap" style="height: 100px;"></div><div id="map"><div class="search-box"><input type="text" id="keyword" value="天安门"/><button id="searchbtn">搜索</button></div><div class="item-list">        <div id="close" class="list-close"></div>        <div class="list-title">结果列表</div>        <ul id="items">        </ul>        <div class="page-ctrl">        <p>        <a class="button" id="firstpage">首页</a>|        <a class="button" id="prevpage">上一页</a>|        <a class="button" id="nextpage">下一页</a>|        <a class="button" id="lastpage">尾页</a>        </p>        <p id="countdiv"></p>        </div>    </div></div></body>
---------------------------------------------------------------------------------------------------------------
技术博客
http://blog.csdn.NET/gisshixisheng
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式
q q:1004740957
e-mail:niujp08@qq.com
公众号:lzugis15
Q Q 群:452117357(webgis)
337469080(Android)
0 0