高德地图的JSAPI学习笔记【一】
高德地图的项目要做
学习笔记记录下来
一、注册账号并申请Key
二、准备页面写好
1.在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key;
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script>
2. 添加div
标签作为地图容器,同时为该div
指定id
属性;
<div id="container"></div>
3. 为地图容器指定高度、宽度;
#container {width:300px; height: 180px; }
4. 进行移动端开发时,请在head
内添加viewport
设置,以达到最佳的绘制性能;
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
三、创建一个简单的地图
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <title>地图显示</title> <style> html, body, #container { width: 100%; height: 100%; } </style> </head> <body> <div id="container"></div> <!-- 加载地图JSAPI脚本 --> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script> <script> var map=new AMap.Map('container',{ resizeEnable: true, //是否监控地图容器尺寸变化 zoom:11, //初始化地图层级 center: [116.397428, 39.90923], //初始化地图中心点 viewMode:'3D'//使用3D视图 }) </script> </body> </html>