高德地圖API的呼叫
阿新 • • 發佈：2019-02-03
專案中需要呼叫一下第三方地圖的API，因為自己一直用的是高德地圖，所以優先採用高德地圖。事實證明我也沒選錯，百度地圖的API使用起來確實挺麻煩。
一、申請key
二、新建專案
一般web型別的專案就可以，我習慣於SpringBoot專案的寫法。結構如下：
1.修改一個埠號（改不改都行，不改預設80），我的是8088。
2.增加請求路徑，因為是測試，所以直接寫在啟動類上。
@SpringBootApplication @Controller public class AmapApplication { public static void main(String[] args) { SpringApplication.run(AmapApplication.class, args); } @GetMapping("/") public String toIdex(){ return "index.html"; } }
3.index.html檔案。
唯一要修改的就是key值，其他幾乎都是不變的。
4.非常簡單的map.css檔案。<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>稚子候門</title> <link rel="stylesheet" href="./styles/map.css" /> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.7&key=你的key值"></script> </head> <body> <div id="container"> </div> <script> var map = new AMap.Map('container', { center: [116.397428, 39.90923], layers: [//使用多個圖層 new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet() ], zooms: [4,18],//設定地圖級別範圍 zoom: 13 }); </script> </body> </html>
#container {width:800px; height: 500px; text-align: center}
三、一些坑
按照高德的說明文件一步一步操作的，但是最後還是不顯示地圖。除錯工具也沒說錯在哪。找了半天，是載入時機的問題。
<script> var map = new AMap.Map('container', { center: [116.397428, 39.90923], layers: [//使用多個圖層 new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet() ], zooms: [4,18],//設定地圖級別範圍 zoom: 13 }); </script>
以上內容要放在頁面的下部。
因為頁面是從上往下載入的。如果把這些內容放在頁面上面，向高德的資料中心發出請求以後還沒得到響應，頁面已經載入結束了，所以不顯示。