实战项目基于 Google Maps JavaScript API 构建经纬度标记地图应用【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum导读本项目原文档位于 archive/old_lessons/javascript/project_apis.md是该课程JavaScript 与 API环节的实战作业要求你仅借助浏览器原生 JavaScript把一个 Google 地图嵌入网页并提供一个表单让用户输入经纬度与消息提交后地图上对应位置出现标记点击标记即可弹出用户输入的消息。通过本项目你将获得阅读第三方 API 官方文档的能力、把 API 对象放进页面的实践经验以及把表单输入 → 事件触发 → API 调用 → 页面更新这条完整链路串起来的综合能力。说明本项目文件已随课程更新归档至archive回收站目录但其读文档、调 API、做交互的练习模式仍然是理解现代 API 开发如仓库中 working_with_apis.md 所讲内容的最佳入门路径之一。项目背景为什么用 Google Maps API在 javascript_apis.md 中已经强调Web 开发中大量功能依赖外部 API例如在页面里嵌入 Google 地图或下载 Flickr 图片。Google Maps 是当时也是现在最普及的 API 之一它拥有极其丰富的功能——基本上你可以做出任何你想要的、跟地图相关的东西。但本项目的目标刻意保持克制只练习把 API 对象放置到页面上并借机训练最核心的软技能——阅读 API 文档。为什么文档刻意不给出实现步骤因为原作业明确写道Youll get some practice with reading API documentation, because we wont tell you how to do what you need to do here.你会练习阅读 API 文档因为我们不会在这里告诉你该怎么做。这正是本项目与普通照着教程敲代码的区别你要学会自己从官方文档中提取答案。前置准备注册应用并获取 API Key现代几乎所有的第三方 API 都要求先注册应用、获取一个专属的API Key用于在每次请求中标识你的身份。仓库中 working_with_apis.md 对这一机制有完整说明大多数 API 通过 URL 访问查询参数通常包含 API Key例如天气 API 的请求形如https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/london?key你的密钥API Key 是随机且唯一的服务商借此统计你的请求量与频率用于防滥用和计费多数服务提供免费额度如 Visual Crossing 免费版每天 1000 次请求超出后需付费升级。获取流程以 Google Maps JavaScript API 为例在 Google Cloud Console 创建/选择一个项目启用Maps JavaScript API创建 API Key 并限制其用途推荐限制为你的域名防止被他人盗用在页面中通过script标签加载 API并附上key参数。本项目属于纯前端练习API Key 会直接出现在页面源码中。请仅使用免费额度或测试 Key 做练习——正如 project_weather_app.md 提醒的Never trust the client永远不要信任客户端。前端暴露的 Key 视为公开信息GitHub 甚至会自动检测到提交的 Key 并向你发出告警生产环境中的敏感 Key 必须存放在服务端常通过环境变量管理这属于后续后端课程的内容。作业目标拆解原作业的核心交付物是一个单页应用包含两块内容一张 Google 地图铺满页面主要区域一个表单包含三个字段——纬度latitude、经度longitude、消息message。用户填写并提交表单后地图上在指定经纬度处放置一个标记marker点击该标记弹出用户输入的消息文本。文档特别强调you dont need to create this functionality yourself -- if you set up the marker properly then Maps will do it for you你不需要自己实现弹窗——只要正确设置标记Maps API 会替你完成。这就是 API 的价值平台把复杂的地图渲染、交互事件、信息窗口全部封装好了你只需按文档配置参数。原作业还鼓励你自由探索 API 的其他能力——你可以自定义地图上几乎一切从图钉thumbtack落下的动画方式到每个元素的颜色。从零开始的实现步骤原作业给出了 6 个步骤下面结合当前仓库的 API 教程逐条展开。第 1 步建立项目仓库在 GitHub 上为项目创建一个新的仓库。基础 HTML/CSS 练习可参考仓库中的 intro_to_html_css.md 与 project_landing_page.md 建立页面骨架。第 2 步准备空白 HTML 文档创建index.html先搭出最小骨架!DOCTYPE html html langen head meta charsetUTF-8 titleGoogle Maps Marker App/title style #map { height: 60vh; width: 100%; } /style /head body h1在地图上放置你的标记/h1 !-- 表单输入经纬度与消息 -- form idmarker-form label纬度 input typetext namelat placeholder例如 40.7128/label label经度 input typetext namelng placeholder例如 -74.0060/label label消息 input typetext namemessage placeholder写点什么…/label button typesubmit放置标记/button /form !-- 地图容器 -- div idmap/div script // 你的 JavaScript 写在这里 /script /body /html注意地图容器div idmap必须有一个确定的高度如60vh或400px否则地图无法渲染——这是 Maps API 最常见的白屏原因之一。第 3 步阅读官方文档这是本项目最重要的训练环节。你需要通读 Google Maps JavaScript API 的官方文档重点搞清楚如何加载 API通过script srchttps://maps.googleapis.com/maps/api/js?key你的KEYcallbackinitMap加载并指定初始化回调函数如何创建地图new google.maps.Map(domElement, options)其中options至少包含center中心点坐标和zoom缩放级别如何添加标记new google.maps.Marker({ position, map, title })如何监听地图/标记事件map.addListener(click, handler)或marker.addListener(click, handler)如何弹出信息窗口new google.maps.InfoWindow({ content })配合infoWindow.open(map, marker)。以上 API 名称与方法是 Google Maps JavaScript API 公开且稳定的接口约定具体参数签名、可选配置项请以你阅读到的官方文档为准——阅读并验证文档本身就是本项目考核的能力。第 4 步动手前先白板推演文档特别强调A few minutes of thought can save you from wasting an hour of coding. The best thing you can do is whiteboard the entire solution before even touching the computer.几分钟的思考能省下你一小时的无用编码。最好的做法是在碰电脑之前先在白板上把整个方案画出来。建议你在白板上画出表单提交事件 (submit) ↓ 阻止默认刷新 (preventDefault) ↓ 读取 lat / lng / message 三个输入值 ↓ 校验数值合法性isNaN / parseFloat ↓ new google.maps.Marker({ position: {lat, lng}, map }) ↓ new google.maps.InfoWindow({ content: message }) ↓ marker.addListener(click, () infoWindow.open(map, marker))这个推演过程会暴露大部分实现难点如经纬度字符串如何转成数字标记点击如何关联到对应消息先想清楚再写代码事半功倍。第 5 步实现应用① 加载并初始化地图script srchttps://maps.googleapis.com/maps/api/js?key你的KEYcallbackinitMap async defer/scriptlet map; function initMap() { // 默认中心可任选一个城市例如纽约 const defaultCenter { lat: 40.7128, lng: -74.0060 }; map new google.maps.Map(document.getElementById(map), { center: defaultCenter, zoom: 4 }); }callbackinitMap告诉 API脚本加载完成后调用initMapasync defer避免阻塞页面解析。② 监听表单提交并放置标记const form document.getElementById(marker-form); form.addEventListener(submit, (event) { event.preventDefault(); // 阻止表单默认刷新行为 const lat parseFloat(document.querySelector(input[namelat]).value); const lng parseFloat(document.querySelector(input[namelng]).value); const message document.querySelector(input[namemessage]).value; // 简单校验非数字直接提示 if (isNaN(lat) || isNaN(lng)) { alert(请输入合法的经纬度数值); return; } // 1. 创建标记 const marker new google.maps.Marker({ position: { lat, lng }, map: map, // 挂载到已初始化的地图上 title: message // 悬停提示 }); // 2. 创建信息窗口并绑定点击事件 —— 弹窗逻辑由 API 完成 const infoWindow new google.maps.InfoWindow({ content: message }); marker.addListener(click, () { infoWindow.open(map, marker); }); // 3. 可选移动地图视野到新标记处 map.panTo({ lat, lng }); });这段代码完整对应了仓库 working_with_apis.md 中强调的请求数据 → 解析 → 渲染到页面三步曲在这里数据是用户输入渲染是创建Marker与InfoWindow。③ 探索 API 的自定义能力原作业鼓励你Play around with the other options。可以尝试标记动画animation: google.maps.Animation.DROP让标记落下自定义图标icon: 图标URL替换默认图钉地图样式styles: [...]修改地图元素配色深色模式、隐藏道路标签等控件布局disableDefaultUI: true关闭默认控件。第 6 步提交与分享将解决方案推送到 GitHub并按仓库惯例通过 Pull Request 在作业页的 Student Solutions 区提交链接原文档列举了多份学员作业形式包括普通实现、距离测量器等多种变体——这也是探索 API精神的体现。若与他人结对完成请在 PR 描述中附上搭档的 GitHub 用户名以便署名。关键要点与常见陷阱地图容器必须显式设置高度否则地图渲染为 0 高度而不可见经纬度必须是数值表单输入的是字符串务必用parseFloat转换并用isNaN校验避免 API 抛出InvalidValueError表单提交要preventDefault()否则页面刷新标记刚放上去就消失标记与消息的关联每个标记在自己的click回调中绑定各自的InfoWindow保证点哪个标记弹哪条消息API Key 泄露告警GitHub 会对公开仓库中检测到的 Key 发送安全告警本项目使用免费测试 Key 无碍但请养成生产环境 Key 永不上前端的习惯详见 project_weather_app.md 的 API keys, secrets, and security 一节。延伸学习完成本项目后可继续完成 javascript_apis.md 中的练习如基于 Giphy API 的 fetch 演示掌握fetch调用 HTTP API 的通用模式现代课程体系中working_with_apis.md 系统讲解了 API Key 机制、fetch与 Promise 链、响应 JSON 解析以及请求被浏览器拦截CORS的处理思路想要更综合的练手可尝试 project_weather_app.md基于天气 API 做一个支持位置搜索与华氏/摄氏切换的完整应用关于 HTML 表单的语义与校验细节可参考 form_basics.md 与 form_validations.md。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考