碼上快樂

相關內容    簡體    繁體

高德地圖API之地圖搜索+興趣點POI+標記點操作

本文轉載自   查看原文   2020-03-07 14:03   933    html / html5 / h5

使用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>

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 高德地圖搜索功能 高德地圖&興趣點（poi） 如何把高德地圖搜索結果導出成excel里？ 高德地圖搜索功能以及清除搜索結果maker 如何把高德地圖搜索商家電話資料導出成excel里？ 高德地圖的使用點標記、折線標記 【API】高德地圖API JS實現獲取坐標和回顯點標記 高德地圖js API實現鼠標懸浮點標記時顯示彈窗詳情，點擊點標記放大地圖操作 高德地圖-Vue-amap實現POI搜索+自定義點 elementui 引入高德地圖標記點和標簽
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM