新手别急着写代码，先把开发环境搞定：VSCode +高德地图开发者申请详细教程
今天逐步带大家从零开始，快速搭建一下属于自己的开发环境，手把手教大家安装：
开发软件VSCode
运行测试工具Chrome
注册成为高德开放平台开发者
注册账号
创建应用
1.开发软件VSCode
1）安装
VSCode不是必须的。用系统自带的记事本、Notepad++、甚至在线编辑器都行。但VSCode有代码高亮和报错提示，长期来看还是建议装上。
它是目前前端开发最常用的编辑器，免费、轻量、打开快。
官网地址：Visual Studio Code - Code Editing. Redefined
安装过程
运行安装包 VSCodeSetup-x64-l,65.2.exe
2)关于插件配置
新手阶段别急着装一堆插件。先装一个 live server插件就够用,用来跑本地网页，实现热更新；其他的后面慢慢加。装太多反而眼花。
2. 运行测试工具Chrome
理论上任何浏览器都能打开地图网页，但强烈推荐用Chrome。
F12开发者工具好用：报错信息看得清楚，网络请求、元素检查、控制台输出，一目了然
兼容性好：高德JS API 2.0对Chrome支持最稳，有些老版本IE或小众浏览器可能会出兼容问题
移动端模拟：后面要学响应式或手机端地图，Chrome可以直接模拟手机尺寸
如果你电脑里只有Edge或360，也能用，但建议再装个Chrome备用。遇到地图显示异常，先用Chrome打开排除一下是不是浏览器的问题。
3.高德开放平台Key申请
1. 注册账号
如果要使用高德的开放平台，我们需要先注册一个账号，成为开发者。
在高德API首页，点击注册。用手机号注册，收个验证码，设个密码，1分钟搞定。
2. 进控制台创建应用
1）登录
登录后进入控制台
2）创建应用
在控制台,选择: 应用管理>我的应用>创建新应用。
填写应用和名称
3）添加Key
创建应用后，，会看到一个"添加Key"的按钮。点进去：添加一个Key作为调用高德地图服务的"身份证"。没有它，地图API不会给你返回数据，页面就是一片空白。
Key名称：随便填，比如"学习用Key"
服务平台：必须选"Web端(JS API)"。很多人这里手滑选成Android或iOS，后面网页里怎么跑都报错
域名白名单：初学阶段建议留空。留空表示不限制域名，你在本地双击HTML文件也能跑。如果填了
localhost或具体域名，本地文件协议（file://）反而打不开
填完提交，你会看到一串Key，类似6e84ad8efab17b016b72ff63aab13a85，复制保存好。
4）拿安全密钥（JS API 2.0必须）
这是高德JS API 2.0的新要求，1.0版本不需要。
在Key列表里，找到你刚创建的Key，旁边有个"安全密钥"（或叫"安全密钥/安全密钥JS Code"），也是一串字符，复制下来。
这两个东西的关系：
Key：告诉高德"我是谁"
安全密钥：告诉高德"这个请求确实是我发的，不是别人盗用我的Key"
缺一不可。后面代码里两个都要填。
工具齐了，Key也有了。我们可以来初次体验一下代码，先把下面这段代码复制过去，把占位符替换成你真实的Key和安全密钥：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个地图</title> <style> /* 这行必须有，否则地图显示空白 */ html, body, #container { width: 100%; height: 100%; margin: 0; } </style> <!-- 1. 配置安全密钥 --> <script> window._AMapSecurityConfig = { securityJsCode: '这里填你的安全密钥' } </script> <!-- 2. 引入高德JS API，key=后面填你的Key --> <script src="https://webapi.amap.com/maps?v=2.0&key=这里填你的Key"></script> </head> <body> <div id="container"></div> <script> var map = new AMap.Map('container', { center: [114.305393, 30.593099], // 武汉市中心 zoom: 12 }); console.log('地图加载成功'); </script> </body> </html>保存为index.html，双击用Chrome打开。
如果看到武汉市的地图了，恭喜你，环境彻底配通了。如果还是空白， 按F12打开Chrome控制台，先看Console里有没有红色报错，修正对应的报错；如果没报错就检查CSS高度。