请老师检查，谢谢

来源：4-7 自由编程

qq_慕移动3101913

2020-02-10 15:08:07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=48259e2fd01bb69855450c5b97b5ea81&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #container {width:100%; height: 100%; position: absolute;left: 0;top: 0;}
        #setCenterNode{width: 280px;position: absolute;z-index: 99;right: 20px;top: 50px;border: 1px solid black;box-shadow: 0 0 5px black;background: white;top: 50px;}
        #searchNode{width: 280px;height: 30px;background: white;position: absolute;right: 20px;top: 20px;}

    </style>
</head>
<body>
    <!-- 地图 -->
    <div id="container"></div>
    <!-- 工具栏 -->
    <div id='searchNode'>
        <input type="" name="" id='searchIpt'> 
    </div>
    <!-- 搜索后的内容 -->
    <div id='setCenterNode'></div>

    <script type="text/javascript">
        //创建一个地图
        var map = new AMap.Map('container');
        
        //AMap.Autocomplete()方法为输入框设置输入提示功能
        var searchNode = new AMap.Autocomplete({
                input:'searchIpt'
            });

        //地图对象;AMap.PlaceSearch()方法实现搜索相关兴趣点的功能。
        var placeSearch = new AMap.PlaceSearch({
            map:map,                //展示在哪个地图里
            pageSize:5,             //显示几条搜索内容在页面上
            pageIndex:1,            //设置默认显示页面，2就是第2个页面               
            panel:'setCenterNode'   //搜索出来的内容，放在哪个元素下
        });
        

        //Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！
        //addEventListener是对组件监听的；
        //代码意思:监听事件，当内容发改生变时触发function函数
        AMap.event.addListener(searchNode,'select',function(e){
            setCenterNode.style.display='block';  //下拉内容显示
            placeSearch.search(e.poi.name)        //点击下拉内容，自动定点到对应位置
        });  

        searchIpt.oninput=function (){  //当输入框内容发发生改变时，下拉框隐藏
            setCenterNode.style.display='none';     //下拉内容隐藏

        };
    </script>
</body>
</html>

写回答

1回答