使用高德地图js api 制作网页上的地图应用。
1.先申请一个 开发者用的 key 。
2. 在页面中引入高德提供的地图js <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key"></script>
完成以上两步就可以在页面中加载 高德地图了。
注意设置 地图容器的 大小:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 7 8 <script src="http://webapi.amap.com/maps?v=1.3&key=efda1426d63ee7f7582d11fd6376cfed"></script> 9 <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> 10 <script type ="text/javascript" src ="jquery.js"></script> 11 <style type="text/css"> 12 #container{ 13 height: 800px; 14 width: 700px 15 } 16 </style> 17 </head> 18 <body> 19 <div id="container"> 20 </div> 21 <script> 22 var map = new AMap.Map('container',{zoom:10,resizeEnable:true,center:[116.39757156,39.90973623]}); 23 var marker = new AMap.Marker({ 24 position:[121.62689209,38.91240739], 25 map:map 26 }); 27 </script> 28 </body> 29 </html>