Gaode poi search

<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PoiPicker/examples/search.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/misc/PoiPicker/examples/"/>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>POI搜索</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0;
            font-size: 13px;
        }

        #outer-box {
            height: 100%;
            padding-right: 300px;
        }

        #container {
            height: 100%;
            width: 100%;
        }

        #panel {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            overflow: auto;
            width: 300px;
            z-index: 999;
            border-left: 1px solid #eaeaea;
            background: #fff;
        }

        #searchBar {
            height: 30px;
            background: #ccc;
        }

        #searchInput {
            width: 100%;
            height: 30px;
            line-height: 30%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: none;
            border-bottom: 1px solid #ccc;
            padding: 0 5px;
        }

        #searchResults {
            overflow: auto;
            height: calc(100% - 30px);
        }

        .amap_lib_placeSearch,
        .amap-ui-poi-picker-sugg-container {
            border: none !important;
        }

        .amap_lib_placeSearch .poibox.highlight {
            background-color: #CAE1FF;
        }

        .poi-more {
            display: none !important;
        }
    </style>
</head>

<body>
<div id="outer-box">
    <div id="container" class="map" tabindex="0"></div>
    <div id="panel" class="scrollbar1">
        <div id="searchBar">
            <input id="searchInput" placeholder="输入关键字搜索地址"/>
        </div>
        <div id="searchResults"></div>
    </div>
</div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=1231dec049cbc42442d269f29078337f'></script>
<!-- UI组件库 1.0 -->

<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
<script type="text/javascript">

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name)  == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    let lng = getQueryString ("lng");
    }


    let lat = getQueryString("lat");
    //let addr = unescape(getQueryString("addr"));
    let addr = getCookie("addr");
    document.getElementById("searchInput").value=addr;
    console.log(addr);

    var map = new AMap.Map('container', {
        zoom: 10,
        center: [lng, lat]
    });


    map.on('click', (e) => {
        console.log(e);
        lng = e.lnglat.getLat();
        lat = e.lnglat.getLng();
        AMap.plugin('AMap.Geocoder', function () {
            var geocoder = new AMap.Geocoder({
                city: "010"//城市，默认：“全国”
            });
            geocoder.getAddress(e.lnglat, function (status, result) {
                if (status == 'complete') {
                    console.log(e.lnglat);
       
                    // $("#searchInput").val(result.regeocode.formattedAddress);
                    parent.document.getElementById(getQueryString("id")).value = result.regeocode.formattedAddress;
                    parent.document.getElementById("lat").value = e.lnglat.lat;
                    parent.document.getElementById("lng").value = e.lnglat.lng;
                    // parent.document.getElementById("street_name").value=poi.address;
                    // parent.document.getElementById("street_number").value=poi.address;
                    var index = parent.layer.getFrameIndex(window.name);//Get the index of the current iframe layer first
                    parent.layer.close(index); //再执行关闭
                } else {
                    $("#searchInput").val("");
                }
            })
        })
    });

    AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
        console.log("AMapUI");

        var poiPicker = new PoiPicker({
            input: 'searchInput',
            placeSearchOptions: {
                map: map,
                pageSize: 10
            },
            searchResultsContainer: 'searchResults'
        });

        poiPicker.on('poiPicked', function (poiResult) {
            console.log("poiPicked");
            poiPicker.hideSearchResults();
            var source = poiResult.source,
                poi = poiResult.item;
            if (source !== 'search') {
                //suggest source, also call search 
                poiPicker.searchByKeyword(poi.name); 
                console.log("aaa"); 
            } else { 
                //console.log("ssssssssssss") 
                //console.log(poi); 
                / / var address=document.getElementById('address').value; 
                console.log(getQueryString("id"));
                parent.document.getElementById(getQueryString("id")).value = poi.cityname + poi.address + poi.name;
                parent.document.getElementById("lat").value = poi.location.lat;
                parent.document.getElementById("lng").value = poi.location.lng; 
                // parent.document.getElementById("street_name").value=poi .address; 
                // parent.document.getElementById ("street_number").value=poi.address; 
                var index = parent.layer.getFrameIndex(window.name); //First get the index of the current iframe layer 
                parent.layer.close(index); //Close again

                console.log("bbb");
            }
        });

        poiPicker.onCityReady(function () {
            poiPicker.searchByKeyword('');
            console.log("ccc");
            document.getElementById("searchInput").value=addr;
        });
    });
</script>
</body>

</html>
Guess you like
