在线高德地图Demo（新测）

野性酷女 2022-04-04 11:11 147阅读 0赞

### 先看看效果，再看看配置和代码，这样会更有兴趣，哈哈 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvaGl1c2Rhc2hp_size_16_color_FFFFFF_t_70][]

## ##

### 一、注册账号并申请Key ###

1. 首先，[注册开发者账号][Link 1]，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用[添加 Key][Key]，「服务平台」一项请选择「 Web 端 ( JSAPI )** **」

### 二、 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key； ###

### 三、 添加`div`标签作为地图容器，同时为该`div`指定`id`属性； ###

HTML

### 四、 为地图容器指定高度、宽度； ###

CSS

#container {width:300px; height: 180px; }

### 五、 进行移动端开发时，请在`head`内添加`viewport`设置，以达到最佳的绘制性能； ###

HTML

### 六、异步加载 JS API ###

JavaScript

window.onLoad  = function(){
            var map = new AMap.Map('container');
      }
      var url = 'https://webapi.amap.com/maps?v=1.4.11&key=您申请的key值&callback=onLoad';
      var jsapi = doc.createElement('script');
      jsapi.charset = 'utf-8';
      jsapi.src = url;
      document.head.appendChild(jsapi);

更多的加载方式，请查看「[JS API 的加载][JS API]」

## 七、完整Demo代码如下： ##

<!document html>
    
    <html>
    <head>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key="></script> 
    <script>
    window.onLoad  = function(){
            var map = new AMap.Map('container');
      }
      var url = 'https://webapi.amap.com/maps?v=1.4.11&key=&callback=onLoad';
      var jsapi = document.createElement('script');
      jsapi.charset = 'utf-8';
      jsapi.src = url;
      document.head.appendChild(jsapi);
    
    </script>
    <style>
    #container {width:1024px; height: 500px; }  
    </style>
    </head>
    
    <body>
    	<div id="container"></div> 
    </body>
    
    </html>

更多精彩技术分享请浏览本人博客：[https://blog.csdn.net/wohiusdashi][https_blog.csdn.net_wohiusdashi]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvaGl1c2Rhc2hp_size_16_color_FFFFFF_t_70]: /images/20220404/8bc52f4791a54115b7298a119a230b86.png
[Link 1]: https://lbs.amap.com/dev/id/newuser
[Key]: https://lbs.amap.com/dev/key/app
[JS API]: https://lbs.amap.com/api/javascript-api/guide/abc/load
[https_blog.csdn.net_wohiusdashi]: https://blog.csdn.net/wohiusdashi