zoukankan      html  css  js  c++  java
  • 高德地图搜索提示

    <!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{
                     100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                #setZoomNode,#setCenterNode{
                     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>

  • 相关阅读:
    Winform WebBrowser引用IE版本问题
    MarkdownPad怎么显示表格
    C# winForm里窗体嵌套
    code first 创建数据库
    mvc+webapi+dapper+ef codefirst项目搭建
    MongoDB:逐渐变得无关紧要
    fiddler打开后 浏览器就上不了网的解决方法
    Android学习系列(16)--App列表之圆角ListView
    Android应用程序结构总结
    android程序监听home键与电源键
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/11426614.html
Copyright © 2011-2022 走看看