高德地圖API常用控制項的添加與刪除（鷹眼、工具條、比例尺）

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/07/12435419.html
-Advertisement-
Play Games

鷹眼插件 AMap.OverView 預設在地圖右下角顯示縮略圖 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src= ...


鷹眼插件 AMap.OverView

預設在地圖右下角顯示縮略圖

<!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.OverView"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new AMap.Map("container",{
            zoom:16,
            center:[121.549792,29.868388]
        });   

        map.addControl(new AMap.OverView({
        }));
        

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

這是不加參數的效果，右下角能看到一個小箭頭，點擊後出現縮略圖

 

 

地圖比例尺插件 AMap.Scale 

無參數情況

<!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.OverView,AMap.Scale "></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new AMap.Map("container",{
            zoom:16,
            center:[121.549792,29.868388]
        });   
        //鷹眼
        map.addControl(new AMap.OverView());
        //比例尺
        map.addControl(new AMap.Scale());
        

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

 

 

AMap.ToolBar 工具條插件，控制縮放和平移

<!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.OverView,AMap.Scale,AMap.ToolBar"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new AMap.Map("container",{
            zoom:16,
            center:[121.549792,29.868388]
        });   
        //鷹眼
        map.addControl(new AMap.OverView());
        //比例尺
        map.addControl(new AMap.Scale());
        //工具條
        map.addControl(new AMap.ToolBar());
        

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

 

 

控制項的添加與刪除

顯示隱藏 show()  hide()

<!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.OverView,AMap.Scale,AMap.ToolBar"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

    <script>
        var map=new AMap.Map("container",{
            zoom:16,
            center:[121.549792,29.868388]
        }); 

        //鷹眼
        var ov=new AMap.OverView({
            visible:true//預設顯示和隱藏
        });
        map.addControl(ov);

        //2s後隱藏鷹眼插件
        setTimeout(function(){
            ov.hide();
        },2000);

        //4s後顯示鷹眼插件
        setTimeout(function(){
            ov.show();
        },4000);

        //比例尺
        map.addControl(new AMap.Scale());
        //工具條
        map.addControl(new AMap.ToolBar());
        

    </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.OverView,AMap.Scale,AMap.ToolBar"></script> 
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #panel{width:200px; height: 50px;top:20px;right:20px;position: absolute;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="panel">
        <button id="yy">鷹眼</button>
        <button id="gjt">工具條</button>
        <button id="blc">比例尺</button>
    </div>

    <script>
        var map=new AMap.Map("container",{
            zoom:16,
            center:[121.549792,29.868388]
        }); 

        //鷹眼
        var ov=new AMap.OverView({
            visible:true//預設顯示和隱藏
        });
        //比例尺
        var os=new AMap.Scale();
        //工具條
        var ot=new AMap.ToolBar();

        map.addControl(ov);
        map.addControl(os);
        map.addControl(ot);

        var yyShow=blcShow=gjtShow=true;//預設顯示

        yy.onclick=function(){
            yyShow=!yyShow;
            if(yyShow){
                ov.show();
            }else{
                ov.hide();
            }
        }
        gjt.onclick=function(){
            gjtShow=!gjtShow;
            if(gjtShow){
                ot.show();
            }else{
                ot.hide();
            }
        }
        blc.onclick=function(){
            blcShow=!blcShow;
            if(blcShow){
                os.show();
            }else{
                os.hide();
            }
        }

        

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 高德地圖API事件-滑鼠事件
    覆蓋物狀態改變時觸發的事件 mousemove mouseover mouseout <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javasc ...
  • 高德地圖API事件-載入+改變等級+改變中心點
    地圖內部狀態改變時觸發的事件 complete <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https:// ...
  • 高德地圖API之公交路線
    引入插件 AMap.Transfer <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https://webap ...
  • 高德地圖API之騎行路線
    騎行路線 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/map ...
  • 高德地圖API之貨車路線
    貨車路線： 引入 AMap.TruckDriving 註意：和駕車路線、步行路線不同的是，必須指定cidy和size，並且坐標傳入為json格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</ti ...
  • 高德地圖API之步行路線
    步行路線 引入插件 AMap.Walking <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Walk ...
  • 高德地圖API之駕車路線
    駕車路線 引入插件 AMap.Driving <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Driv ...
  • VUE實現Studio管理後臺（八）：用右鍵菜單contextmenu，編輯樹形結構
    RXEdior預設會有文件管理功能，但是靈活性需求不大，目前的設想是文件夾不允許修改，只允許增刪改文件。基於這樣的設想，把界面實現成這個效果： 這個功能並不是一個通用功能，並且我們做的代碼，也沒有按照類庫的標準要求，這種編輯功能實現有些複雜，用了大量的js事件，代碼不是很容易讀。後期這個功能可能會有 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類