高德地图搜索提示 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>高德地图</title>
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #container{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }
            #setZoomNode,#setCenterNode{
                width: 300px;
                height: 500px;
                position: absolute;
                z-index: 99;
                right: 20px;
                top: 20px;
                border: 1px solid black;
                box-shadow: 0 0 5px black;
                background: white;
            }
            #node li{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="setCenterNode">
            <input type="text" id="searchText"/>
            <ul id="node"></ul>
        </div>
        
        <script type="text/javascript">
            var map = new AMap.Map('container',{
                zoom:10,
                center:[121,30]
            });
            
            //加载插件:Autocomplete 地图加载完毕 会触发的回调函数
            AMap.plugin('AMap.Autocomplete',function(){
                //console.log(1);
                searchText.oninput = function(){
                    //console.log(this.value);
                    node.innerHTML = '';
                    if(this.value == ''){
                        return;
                    }
                    
                    new AMap.Autocomplete().search(this.value,function(status,data){
                        //console.log(data);
                        for(var i = 0;i < data.tips.length;i++){
                            var oLi = document.createElement('li');
                            oLi.innerHTML = data.tips[i].name;
                            oLi.P = data.tips[i].location.P;
                            oLi.Q = data.tips[i].location.Q;
                            node.appendChild(oLi);
                            oLi.onclick = function(){
                                //console.log(this.P,this.R);
                                map.setCenter([this.Q,this.P]);
                            };
                        }
                    });
                };
            });
            
        </script>
    </body>
</html>

 

 

posted @ 2019-08-28 21:24  是桂  阅读(402)  评论(0)    收藏  举报