高德地圖API註冊使用教程簡答演示

-Advertisement-

高德地圖API最大優勢：相容各種瀏覽器 1、註冊賬號並申請key （申請key能擁有更完整的功能，沒有key功能會受限）進入高德地圖官網 https://lbs.amap.com/ 選擇web端-地圖js API 按步驟註冊開發者賬號，然後登陸在應用管理-我的應用-創建應用-為web添加key ...

高德地圖API最大優勢：相容各種瀏覽器

1、註冊賬號並申請key

（申請key能擁有更完整的功能，沒有key功能會受限）

進入高德地圖官網 https://lbs.amap.com/

選擇web端-地圖js API

按步驟註冊開發者賬號，然後登陸

在應用管理-我的應用-創建應用-為web添加key

2、準備頁面

創建好html頁面，根據開發文檔進行操作

map.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=換成自己的key"></script> 
    <style>
        *{margin:0;padding:0;}
        #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');
    </script>
</body>
</html>

以上是同步引入方式，還有非同步引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script>
        window.init=function(){
            var map = new AMap.Map('container');
        }        
    </script>

    <!-- 給key值後面添加回調 -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&callback=init"></script> 

    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 

    
</body>
</html>

也可以動態生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script>
        window.onload=function(){
            new AMap.Map("container");            
        }    

        var ele=document.createElement("script");
        ele.src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a";
        document.head.appendChild(ele);    
    </script>

    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
    </style>
</head>
<body>
    <div id="container"></div> 
    
</body>
</html>

當然，總體來說還是比較推薦前面最簡單的那種

怎麼簡單怎麼來唄~

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

-Advertisement-

更多相關文章

MySQ許可權控制語句

1.使用root賬號登陸到MySQL伺服器： 2.切換到mysql資料庫實例： 3.查看用戶表： 4.創建一個只允許從本機登錄的用戶“yang”，密碼為“yangpass”： 5.刪除一個名為“yang”的本機登錄用戶： 6.創建一個允許從任何主機登錄的用戶“yang”，密碼為“yangpass”： ...
Glide源碼解析一，初始化

轉載請標明出處：https:////www.cnblogs.com/tangZH/p/12409849.html Glide作為一個強大的圖片載入框架，已經被android官方使用，所以，明白Glide的載入流程以及原理對加深我們對glide的理解是很重要的。本文基於glide 4.11 Glid ...
響應式網頁設計項目#3---Product Landing Page----電商企業---伯庫電玩的塞爾達促銷頁面

響應式網頁設計項目#3 Product Landing Page 電商企業，伯庫電玩的塞爾達促銷頁面 https://codepen.io/yiyunpan// #技術堆棧 1. 使用HTML、JavaScript和CSS完成。這裡是純CSS做的 #內容 1. 使用了H5 語義化的標簽 2. 重點使 ...
css排版常用樣式、三種不同html類型、css佈局盒模型介紹

通過字體、字型大小、顏色、粗體、斜體、下劃線、刪除線、縮進、行間距、字元間距、對齊等css格式化要素實現網頁格式化排版，完成設計頁面效果;瞭解css佈局前提，需要掌握三種html不同標簽：塊狀元素、內聯元素（行級元素）、內聯塊狀元素，瞭解它們之間如何進行轉換；此外通過盒模型掌握css佈局，盒模型作為CS... ...
快速掌握ES6 iterator Generator和async 之間的關係及其用法

簡述了iterator,genteator和async的關係，和他們的基本原理以及用例。 ...
高德地圖API，獲取和設置zoom級別和中心點

雙擊可以調整高德地圖的級別 zoom 改變初始地圖的級別，zoom值越高，相當於滑鼠雙擊放大，內容越詳細，範圍越小 center 改變初始地圖的中心點，是一個數組，包含經緯度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
ES6 - 基礎學習(14): 函數的擴展

函數參數的擴展參數的預設值 // ES6之前，方法不能為參數直接指定預設值，只能通過參數判定的方式，為參數設置預設值。 function testFunc(x, y) { y = y || 'ES6'; console.log(x, y); } testFunc('Welcome to'); // ...
nodejs的xlsx模塊批量解析與導出excel數據表簡單使用

想用nodejs的xlsx模板實現一個小功能，可以批量解析多個excel表，且能對其中的數據進行操作後，導出新表。主要實現功能為將多個表，每個表多個sheet中的具體一列數據由加密變成解密，這裡主要是base64解密，需要解析的表放在import文件夾下，需要導出的表導出到output文件夾下，實 ...