最近配合后台做管理系統，需要前端用原生html頁面嵌入到后台，於是乎...記錄下原生JS怎么使用高德地圖吧
一.獲取高德地圖的key
獲取地址：高德開放平台https://lbs.amap.com/
1.手機號登錄高德開放平台
2.
3、選擇web服務，然后提交，就會生成key的值
二.定義放地圖的容器，並設置寬高
<style> #oneMap { width: 100%; height: 800px; } </style> <div id="oneMap"></div>
注意：容器的ID 和 第三步初始化地圖的 ID保持一致
三.在線加載 JSAPI以及地圖初始化
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
// 地圖初始化
<script type="text/javascript"> var map = new AMap.Map('oneMap', { center:[117.000923,36.675807], zoom:11 }); </script>
注意：key = 賦值自己申請的key值
四. 效果圖如下
彩蛋：在vue里面調用高德地圖demo
直接上全部代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>高德地圖</title> <style> #oneMap { width: 100%; height: 800px; } </style> </head> <body> <div id="oneMap"></div> <script src="./js/vue.min.js"></script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8bcd5d53aee035144d261311c2aba4a4&plugin=AMap.Autocomplete,AMap.Geocoder,AMap.MouseTool"></script> <script> var app = new Vue({ el: '#oneMap', data: function () { return { } }, mounted: function () { this.initMap(); }, created: function () { }, methods: { // 初始化高德地圖 initMap: function () { var map = new AMap.Map('oneMap', { center: [117.000923, 36.675807], zoom: 11 }); } } }) </script> </body> </html>
注意：在mounted中初始化地圖
不足之處，歡迎各位大佬留言指點！
作者：微微一笑絕絕子
出處：https://www.cnblogs.com/wwyxjjz/p/15183692.html
本博客文章均為作者原創，轉載請注明作者和原文鏈接。