前篇：

零基础转行GIS开发？三大开发方向从哪里入手？-CSDN博客问的人里面，有地信专业刚毕业的学生，有干了几年测绘想转行的，还有完全零基础、连HTML都没碰过的。大家的起点不一样，但踩的坑出奇地一致——所以今天这篇，不讲技术内容，先帮你把路子理清楚。方向选对了，后面学起来才顺。 https://yaogis888.blog.csdn.net/article/details/162222947?spm=1011.2415.3001.10575&sharefrom=mp_manage_link

今天逐步带大家从零开始，快速搭建一下属于自己的开发环境，手把手教大家安装：

  • 开发软件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高度。

(详细视频教程)

图片

总结：

本篇介绍了一些安装前端编程工具VSCODE以及高德开放平台注册的流程。

下篇开始正式带着大家手写代码。

# vscode # ide # 编辑器
Logo
亚马逊云科技技术品牌专区

更多推荐

2026年量化工具选择，要跟着能力基础走

读者应理解，选择工具前要先判断自己的能力基础和当前任务。工具应该帮助自己补上当前最关键的缺口，而不是替代学习顺序本身。

avatar 亚马逊云科技技术品牌专区

近期零基础学量化，先按基础差异拆学习顺序

读者应明白，拆解学习顺序时要先看自己的基础缺口，再决定哪一段需要放慢。不同流程阶段都有不同检查任务，学习路线要能反映这些差异。

avatar 亚马逊云科技技术品牌专区

加州理工 CS367 C 语言系统编程笔记（一）

C语言是一种强大且广泛使用的编程语言，尤其在系统编程领域。本节课我们将学习C语言的基础语法，包括如何编写“Hello, World!”程序、声明变量以及使用基本数据类型。我们将通过实际的代码示例来加深理解。本节课中我们一起学习了C语言的基础语法，包括如何编写和运行一个简单的C程序、声明变量以及使用基本数据类型。我们还介绍了如何使用Shell环境来编译和运行程序。通过对比Java，你可以看到C语言在

avatar 亚马逊云科技技术品牌专区