Board logo

标题: 高德地图api接口poi检索示例 [打印本页]

作者: look_w    时间: 2019-4-17 18:46     标题: 高德地图api接口poi检索示例

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>按关键字查询</title>
    <!-- <style>
    body{ margin:0; padding:0;font:12px/16px Verdana, Helvetica, Arial, sans-serif;}
    </style> -->
    <link rel="stylesheet" href="/Public/Css/demo.Default.css" type="text/css"/>
    <script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=3e4ad80bb35e0d2f4a0ccd9779162923"></script>
    <script language="javascript">
    var mapObj;
    var marker = new Array();
    var windowsArr = new Array();
    //基本地图加载
    function mapInit() {
        mapObj = new AMap.Map("iCenter",{
            level:13,  
            center:new AMap.LngLat(116.397428,39.90923)
        });
    }
    function placeSearch() {
        var MSearch;
        mapObj.plugin(["AMap.PlaceSearch"], function() {        
            MSearch = new AMap.PlaceSearch({ //构造地点查询类
                city:"成都" //城市
            });
            AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果
            MSearch.search("宽窄巷子"); //关键字查询
        });
    }
    //添加marker&infowindow   
    function addmarker(i, d) {
        var lngX = d.location.getLng();
        var latY = d.location.getLat();
        var markerOption = {
            map:mapObj,
            icon:"http://api.amap.com/webapi/static/Images/" + (i + 1) + ".png",
            position:new AMap.LngLat(lngX, latY)
        };
        var mar = new AMap.Marker(markerOption);         
        marker.push(new AMap.LngLat(lngX, latY));
     
        var infoWindow = new AMap.InfoWindow({
            content:"<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel,d.location),
            size:new AMap.Size(300, 0),
            autoMove:true,  
            offset:new AMap.Pixel(0,-30)
        });
        windowsArr.push(infoWindow);
        var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};
        AMap.event.addListener(mar, "click", aa);
    }
    //回调函数
    function keywordSearch_CallBack(data) {
        var resultStr = "";
        var poiArr = data.poiList.pois;
        var resultCount = poiArr.length;
        for (var i = 0; i < resultCount; i++) {
            resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://api.amap.com/webapi/static/Images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
                resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel,poiArr[i].location) + "</td></tr></table></div>";
                addmarker(i, poiArr[i]);
        }
        mapObj.setFitView();
        document.getElementById("result").innerHTML = resultStr;
    }
    function TipContents(type, address, tel,location) {  //窗体内容
        if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
            type = "暂无";
        }
        if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
            address = "暂无";
        }
        if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof tel == "undefined") {
            tel = "暂无";
        }
        if (location == "" || location == "undefined" || location == null || location == " undefined" || typeof location == "undefined") {
            location = "暂无";
        }
     
        var str = "  地址:" + address + "<br />  电话:" + tel + " <br />  类型:" + type+"<br />  经纬度:"+location;
        return str;
    }
    function openMarkerTipById1(pointid, thiss) {  //根据id 打开搜索结果点tip
        thiss.style.background = '#CAE1FF';
        windowsArr[pointid].open(mapObj, marker[pointid]);
    }
    function onmouseout_MarkerStyle(pointid, thiss) { //鼠标移开后点样式恢复
        thiss.style.background = "";
    }
     
     
    function showmap()
    {
    mapInit();
    placeSearch();
     
    }
    </script>
    </head>
    <body>  
    <table width="661px"  border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td><div id="iCenter" style="height:300px;width=661px "></div></td>
        </tr>
      
      <hr>
        <tr>
            <td>
                <div id="result" name="result" style="overflow:auto;margin-top:5px;width:661px;height:255px"></div>
            </td>
        </tr>
    </table>         
    </body>
    </html>




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0