1. 开始准备
申请key和安全密钥，https://lbs.amap.com/，在高德API申请安全密钥和key
2. 引入高德API，使用内置类AMap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>开发准备</title> <!-- 引入高德API --> <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'密钥', } </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"> </script> </head> <body> <script> console.log(AMap) </script> </body> </html>
3. 地图显示
（1）引入高德API
（2）创建地图容器
（3）设置地图样式
（4）加载地图，定义一个变量，保存一个对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图显示</title> </head> <!--1. 引入高德API --> <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'密钥', } </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"> </script> <!-- 3. 设置地图样式 --> <style> #container { width: 300px; height: 300px; } </style> <body> <!-- 2. 创建地图容器 --> <div id="container"></div> <!-- 4. 加载地图 --> <script> //定义一个变量，保存一个对象 var map = new AMap.Map('container'); </script> </body> </html>
4. 地图参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图参数</title> </head> <!--1. 引入高德API --> <!--1. 引入高德API --> <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'密钥', } </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"> </script> <!-- 3. 设置地图样式 --> <style> html,body,#container{ width: 100%; height: 100%; } </style> <body> <!-- 2. 创建地图容器 --> <div id="container"></div> <!-- 4. 加载地图 --> <script> var map = new AMap.Map("container",{ center: [108.93,34.27], //设置地图中心点经纬度 zoom: 10, //地图的缩放比例（3-20） viewMode: '3D', //3D显示 pitch: 45, //45度 }) </script> </body> </html>
可以在底图的基础上再次添加一些其他的显示数据，比如实时路况类等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图层</title> </head> <!--1. 引入高德API --> <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode:'密钥', } </script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=key"> </script> <!-- 3. 设置地图样式 --> <style> html,body,#container{ width: 100%; height: 100%; } </style> <body> <button onclick="add()">显示实时路况</button> <button onclick="remove()">隐藏实时路况</button> <!-- 2. 创建地图容器 --> <div id="container"></div> <!-- 4. 加载地图 --> <script> var map = new AMap.Map("container",{ center: [108.93,34.27], //设置地图中心点经纬度 zoom: 10, //地图的缩放比例（3-20） viewMode: '3D', //3D显示 pitch: 45, //45度 }) //添加一个实时路况的图层 var traffic = new AMap.TileLayer.Traffic({ autoRefresh: true, //是否自动刷新 interval: 180, //刷新间隔 }) function add(){ map.add(traffic) } function remove(){ map.remove(traffic) } </script> </body> </html>