高德地图-搜索

地图搜索
第一种：使用插件Autocomplete，加载插件，待地图加载完毕，会触发的回调函数

AMap.plugin('AMap.Autocomplete',function(){
	new AMap.Autocomplete().search(要搜索的内容,function(status,data){
		console.log(data 搜索出来的数据)
	})
})

手动加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
    #container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
    #setCenterNode{width: 200px;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;}
    #node li:hover{background: #ccc;}
</style>
    </head>
<body>
    <div id="container"></div> 
    <div id='setCenterNode'>
        <input type="" name="" id='searchText'>  
        <ul id='node'></ul>
    </div>
    <script type="text/javascript">
		var map = new AMap.Map('container',{
            zoom:11, //初始的地图级别
            center:[100.379391,30.861536] //初始化地图的中心点
        });

        //加载插件 Autocomplete 地图加载完毕 会触发的回调函数
        AMap.plugin('AMap.Autocomplete',function(){
            searchText.oninput = function(){//oninput内容出现改变时，触发
                // console.log(this.value);
                node.innerHTML='';
                if(this.value==''){
                        return;
                }                
                //data是搜索地图，出来的数据
                new AMap.Autocomplete().search(this.value,function(status,data){
                    console.log(data.tips);         
                    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>

在这里插入图片描述
第二种：在key后面加入要加载的插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0&plugin=AMap.Autocomplete"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
    #container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
    #setCenterNode{width: 200px;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="" name="" id='searchText'>  
        <ul id='node'></ul>
    </div>
    <script type="text/javascript">
		var map = new AMap.Map('container',{
            zoom:11, //初始的地图级别
            center:[100.379391,30.861536] //初始化地图的中心点
        });
        new AMap.Autocomplete({
            input:'searchText'
        })
    </script>
</body>
</html>

在这里插入图片描述

saiyi绒小花

发布了40 篇原创文章 · 获赞 0 · 访问量 764

私信关注

猜你喜欢