高德地图API之地图搜索+兴趣点POI+标记点操作

使用amap.autocomplete() 自动补全插件，实现搜索功能

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setzoomnode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setzoomnode">
        鼠标点击的经纬度：<span id="xy"></span>
    </div>

    <script>
        var map=new amap.map("container");    

        //加载amap.autocomplete自动补全插件
        amap.plugin("amap.autocomplete",function(){
            console.log("插件加载完成");

            //使用插件的搜索功能
            new amap.autocomplete().search("宁波",function(status,data){
                console.log(data);
            })
        })
    </script>    
</body>
</html>

使用自动补全搜索，并展示出来。点击后可以定位

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setzoomnode{width:200px;height:500px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
        #node li{cursor:pointer;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setzoomnode">
        <input type="text" id="txt">
        <ul id="node"></ul>
    </div>

    <script>
        var map=new amap.map("container");    

        //加载amap.autocomplete自动补全插件
        amap.plugin("amap.autocomplete",function(){
            //console.log("插件加载完成");

            txt.oninput=function(){

                node.innerhtml="";

                //console.log(this.value);//输入框中的文本
                if(this.value=="") return;

                //使用插件的搜索功能
                new amap.autocomplete().search(this.value,function(status,data){

                    for(var i=0;i<data.tips.length;i++){
                        var oli=document.createelement("li");
                        oli.innerhtml=data.tips[i].name;

                        //将坐标赋值给属性
                        oli.r=data.tips[i].location.r;
                        oli.q=data.tips[i].location.q;

                        node.appendchild(oli);

                        //oli点击事件
                        oli.onclick=function(){
                            console.log(this.r+","+this.q);

                            map.setcenter([this.r,this.q]);
                        }
                    }
                    //console.log(data);
                })
            }
            
        })
    </script>    
</body>
</html>

点击之后自动设置中心点

插件还有另一种方式来加载 &plugin=

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete"></script>

调用也有另一种方式（官方提供，自带下拉样式）

new amap.autocomplete({
            input:"txt"
        })

完整代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setzoomnode{width:200px;height:500px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
        #node li{cursor:pointer;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setzoomnode">
        <input type="text" id="txt">
    </div>

    <script>
        var map=new amap.map("container");    

        //官方给出的搜索方式
        
        new amap.autocomplete({
            input:"txt"
        })    
      
    </script>    
</body>
</html>

输入提示与poi结合

poi =》 point of interest 兴趣点

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setzoomnode{width:280px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
        #node li{cursor:pointer;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setzoomnode">
        
    </div>

    <script>
        var map=new amap.map("container");    
       
        //兴趣点服务
        amap.service(["amap.placesearch"],function(){
            new amap.placesearch({
                pagesize:5,//一页显示几条
                pageindex:1,//默认是1，可不写
                city:"0574",//城市区号
                map:map,//地图名
                panel:"setzoomnode"//数据装载容器
            }).search("电影院");
        })
      
    </script>    
</body>
</html>

需要注意的是：只有在服务器上才能显示图片

通过输入框搜索

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setzoomnode{width:280px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:50px;right:20px;position: absolute;}
        #node li{cursor:pointer;}
        #searchnode{width:280px;height:30px;background:#fff;position: absolute;top:20px;right:20px;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="searchnode">
        <input type="text" id="searchipt">
        <button id="btn">搜索</button>
    </div>
    <div id="setzoomnode">
        
    </div>

    <script>
        var map=new amap.map("container");    
       
       btn.onclick=function(){
            //兴趣点服务
            amap.service(["amap.placesearch"],function(){
                new amap.placesearch({
                    pagesize:4,//一页显示几条
                    pageindex:1,//默认是1，可不写
                    city:"0574",//城市区号
                    citylimit:true,//限制城市
                    map:map,//地图名
                    panel:"setzoomnode"//数据装载容器
                }).search(searchipt.value);
            })    
       }
        
      
    </script>    
</body>
</html>

二者结合使用的demo

amap事件监听

amap.event.addlistener(searchval,"select",function(e){
            //输入地址，选中某个具体地址时触发
            console.log(e);

        })

全部代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete,amap.placesearch"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setzoomnode{width:280px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:50px;right:20px;position: absolute;}
        #node li{cursor:pointer;}
        #searchnode{width:280px;height:30px;background:#fff;position: absolute;top:20px;right:20px;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="searchnode">
     <input type="text" id="searchipt">
    </div>
    <div id="setzoomnode">
        
    </div>

    <script>
        var map=new amap.map("container");    
       
        var searchval=new amap.autocomplete({
            input:"searchipt"
        });
        
        var placesearch=new amap.placesearch({
            map:map
        });

        //amap事件监听
        amap.event.addlistener(searchval,"select",function(e){
            //输入地址，选中某个具体地址时触发
            console.log(e);

            placesearch.search(e.poi.name);

        })
      
    </script>    
</body>
</html>

在给定范围内搜索（搜索周边）

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete,amap.placesearch"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #searchnode{width:300px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="searchnode">
        <input type="text" id="txt">
        <button id="btn">搜索</button>
        <div id="list"></div>
    </div>
    

    <script>
        var map=new amap.map("container",{
            zoom:19,
            center:[121.54979200000002,29.868388]
        });  

        console.log(map.getcenter().tostring());  

        amap.service(["amap.placesearch"],function(){

            btn.onclick=function(){
                new amap.placesearch({
                    type:"餐饮",//住宿
                    pagesize:5,
                    pageindex:1,
                    city:"0574",
                    citylimit:true,
                    map:map,
                    panel:"list"
                }).searchnearby("宁波",[121.54979200000002,29.868388],1000,function(){});
                //搜索距离指定中心点方圆1000米的住宿点
            }
        })

    </script>    
</body>
</html>

添加标记点

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete,amap.placesearch"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #searchnode{width:300px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:19,
            center:[121.54979200000002,29.868388]
        });  

        //添加标记
        var marker=new amap.marker({
            icon:"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",//官方提供的标记
            position:[121.54979200000002,29.868388]
        });
        
        marker.setmap(map);


    </script>    
</body>
</html>

点击地图添加标记点-多标记

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete,amap.placesearch"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #searchnode{width:300px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:11,
            center:[121.54979200000002,29.868388]
        });        

        map.on("click",function(e){
            console.log(e.lnglat);

            
            //添加标记
            var marker=new amap.marker({
                icon:"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",//官方提供的标记
                position:[e.lnglat.r,e.lnglat.q],
                offset:new amap.pixel(-25,-25)

            });

            marker.setmap(map);
        })


    </script>    
</body>
</html>

通过css修改标记点尺寸

先获取到样式名

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete,amap.placesearch"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #searchnode{width:300px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
        .amap-icon img{width:25px;height:34px;}
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:11,
            center:[121.54979200000002,29.868388]
        });        

        map.on("click",function(e){
            console.log(e.lnglat);

            
            //添加标记
            var marker=new amap.marker({
                icon:"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",//官方提供的标记
                position:[e.lnglat.r,e.lnglat.q],
                offset:new amap.pixel(-25,-25)

            });

            marker.setmap(map);
        })


    </script>    
</body>
</html>

自定义图标样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete,amap.placesearch"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #searchnode{width:300px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
        .amap-icon img{width:25px;height:34px;}
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:11,
            center:[121.54979200000002,29.868388]
        });        

        //自定义图标样式
        var marker1=new amap.icon({
            size:new amap.size(500,500),//告诉地图图片尺寸
            image:"1.jpg",
            imagesize:new amap.size(100,100)//地图上显示的图片尺寸
        })

        //创建图标
        var mk1=new amap.marker({
            position:[121.54979200000002,29.868388],//图标位置
            icon:marker1//指定图标样式
        })

        mk1.setmap(map);//图标丢入地图

    </script>    
</body>
</html>

自定义标记点-多标记

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete,amap.placesearch"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #searchnode{width:300px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
        .amap-icon img{width:25px;height:34px;}
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:11,
            center:[121.54979200000002,29.868388]
        });        

        //自定义图标样式
        var marker1=new amap.icon({
            size:new amap.size(500,500),//告诉地图图片尺寸
            image:"1.jpg",
            imagesize:new amap.size(100,100)//地图上显示的图片尺寸
        })

        //创建图标
        var mk1=new amap.marker({
            position:[121.54979200000002,29.868388],//图标位置
            icon:marker1//指定图标样式
        })

        //自定义图标样式
        var marker2=new amap.icon({
            size:new amap.size(500,313),//告诉地图图片尺寸
            image:"2.jpg",
            imagesize:new amap.size(100,60)//地图上显示的图片尺寸
        })

        //创建图标
        var mk2=new amap.marker({
            position:[121.44979200000002,29.68388],//图标位置
            icon:marker2//指定图标样式
        })

        map.add([mk1,mk2]);//图标批量加入地图

    </script>    
</body>
</html>

删除标记

方法一：marker.setmap(null)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete,amap.placesearch"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #searchnode{width:300px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
        .amap-icon img{width:25px;height:34px;}
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:11,
            center:[121.54979200000002,29.868388]
        });        

        //创建图标
        var mk=new amap.marker({
            position:[121.54979200000002,29.868388],//图标位置
            icon:"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
        })

        mk.setmap(map);

        //3秒后清除标记
        settimeout(function(){
            mk.setmap(null);
        },3000);

    </script>    
</body>
</html>

方法二：

map.remove([marker...])

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=amap.autocomplete,amap.placesearch"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #searchnode{width:300px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
        .amap-icon img{width:25px;height:34px;}
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new amap.map("container",{
            zoom:11,
            center:[121.54979200000002,29.868388]
        });        

        //创建图标
        var mk1=new amap.marker({
            position:[121.54979200000002,29.868388],//图标位置
            icon:"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
        })
        var mk2=new amap.marker({
            position:[121.54979200000002,29.668388],//图标位置
            icon:"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
        })

       map.add([mk1,mk2]);

        //3秒后清除标记
        settimeout(function(){
            map.remove([mk1,mk2]);
        },3000);

    </script>    
</body>
</html>

高德地图API之地图搜索+兴趣点POI+标记点操作

相关推荐

APICloud开发者进阶之路 | 超级实用技巧

「学习笔记」gdb 调试的简单操作

.Net Core 3.0 对 MongoDB 的多条件查询（两种）操作

2022-12-20：二狗买了一些小兵玩具，和大胖一起玩，一共有n个小兵，这n个小兵拍成一列，第i个小兵战斗力为hi，然后他们两个开始对小兵进行排列，一共进行m次操作，二狗每次操作选择一个数k，

2020-01-20：mysql中，一张表里有3亿数据，未分表，要求是在这个大表里添加一列数据。数据库不能停，并且还有增删改操作。请问如何操作？

Django笔记三十三之缓存操作

ASP.NET Core Web API Cassandra CRUD 操作

vue对vue-giant-tree进行节点操作

高德地图API之地图搜索+兴趣点POI+标记点操作

相关推荐

APICloud开发者进阶之路 | 超级实用技巧

「学习笔记」gdb 调试的简单操作

.Net Core 3.0 对 MongoDB 的多条件查询（两种）操作

2022-12-20：二狗买了一些小兵玩具，和大胖一起玩， 一共有n个小兵，这n个小兵拍成一列， 第i个小兵战斗力为hi，然后他们两个开始对小兵进行排列， 一共进行m次操作，二狗每次操作选择一个数k，

2020-01-20：mysql中，一张表里有3亿数据，未分表，要求是在这个大表里添加一列数据。数据库不能停，并且还有增删改操作。请问如何操作？

Django笔记三十三之缓存操作

ASP.NET Core Web API Cassandra CRUD 操作

vue对vue-giant-tree进行节点操作

2022-12-20：二狗买了一些小兵玩具，和大胖一起玩，一共有n个小兵，这n个小兵拍成一列，第i个小兵战斗力为hi，然后他们两个开始对小兵进行排列，一共进行m次操作，二狗每次操作选择一个数k，