首页手记基于高德接口封装地址搜索服务

基于高德接口封装地址搜索服务

标签：

Html/CSS JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>高德地图查询</title>
</head>

<body>
    <div class="search">
        <input type="text" id='intext' name="">
        <button id="butseach">搜索</button>
    </div>
    <div id="GdList">
    </div>
</body>

</html>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://webapi.amap.com/maps?v=1.3&key=‘开发者秘钥’&plugin=AMap.PlaceSearch"></script>
<script type="text/javascript">
window.onload = function() {

        var intext = document.getElementById('intext');
        var butseach = document.getElementById('butseach');
        var GdList = document.getElementById('GdList');

        eflower_GdMap.GdSearchload();

        butseach.onclick = function() {

            var val = intext.value;

            eflower_GdMap.GdSearch(val, GdList);
        }
    }

//初始化业务加载 搜索插件，自定义div map;
//eflower_GdMap.GdSearchload();
//第一个传值是搜索的内容 第二个查询出来的数据的接收容器
//eflower_GdMap.GdSearch(val,GdList);

eflower_GdMap = {
    GdSearchload: function() {
        var e = document.body,
            a = document.createElement("div");
        a.style.display = "none";
        a.setAttribute("id", "MarkMap");
        e.appendChild(a);
        a = document.createElement("script");
        a.setAttribute("type", "text/javascript");
        a.setAttribute("src", "http://cache.amap.com/lbs/static/PlaceSearchRender.js");
        e.appendChild(a)
    },
    GdSearch: function(e, a) {
        new AMap.Map("MarkMap");
        (new AMap.PlaceSearch({
            pageSize: 100,
            pageIndex: 1
        })).search(e, function(e, g) {
            if ("complete" === e && "OK" === g.info) {
                var d = g.poiList.pois,
                    f = document.createElement("ul");
                f.style.listStyle = "none";
                f.style.margin = "10px";
                f.style.padding = "0px";
                for (var b = 0; b < d.length; b++)
                    if ("\u5730\u540d\u5730\u5740\u4fe1\u606f;\u666e\u901a\u5730\u540d;\u5730\u5e02\u7ea7\u5730\u540d" != d[b].type && "\u5730\u540d\u5730\u5740\u4fe1\u606f;\u666e\u901a\u5730\u540d;\u7701\u7ea7\u5730\u540d" != d[b].type && "\u5730\u540d\u5730\u5740\u4fe1\u606f;\u666e\u901a\u5730\u540d;\u533a\u53bf\u7ea7\u5730\u540d" != d[b].type) {
                        var c = document.createElement("li");
                        c.style.height = "35px";
                        c.style.width = "100%";
                        c.style.paddingLeft = "10px";
                        c.style.lineHeight = "35px";
                        c.style.borderBottom = "1px solid #e5e5e5";
                        c.setAttribute("lg", d[b].location.lng + "," + d[b].location.lat);
                        c.innerHTML = d[b].name;
                        f.appendChild(c)
                    }
                a.appendChild(f)
            } else alert("\u67e5\u65e0\u6570\u636e\uff01\uff01")
        });
        new Lib.AMap.PlaceSearchRender
    }
};
</script>

点击查看更多内容