当前位置：首页 > 文章列表 > 文章 > 前端 > HTML嵌入地图方法及Google地图教程
目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《HTML嵌入地图方法及Google Maps集成教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~
最直接的方式是使用标签嵌入预生成的地图链接，适用于展示固定位置；2. 若需动态交互或自定义功能，则应使用Google Maps JavaScript API；3. 选择方法取决于需求复杂度：静态展示用<iframe>，动态功能用API；4. 常见问题包括API密钥配置错误、地图容器无明确尺寸及脚本加载时机不当；5. 替代方案包括OpenStreetMap（搭配Leaflet或OpenLayers）、Mapbox、百度地图和高德地图，可根据地区、成本和定制需求选择。最终选择应综合考虑功能需求、用户区域、预算和技术熟悉度，以实现最佳地图集成效果。</p><p><img src="/uploads/20250830/175652328768b26b1793272.jpg" alt="HTML如何嵌入地图？Google Maps怎么集成？"></p><p>将地图嵌入HTML页面，最直接的方式是使用<code><iframe></code>标签引入预生成的地图链接，这适用于快速展示一个固定位置。若需要更丰富的交互性、动态数据展示或自定义功能，则通常会集成地图服务提供商（如Google Maps）的JavaScript API。这两种方法各有侧重，取决于你的具体需求和对复杂度的接受程度。</p><h3>解决方案</h3><p>如果你只是想在网页上展示一个特定地点，比如公司的地址，最省心的方法就是利用Google Maps的嵌入功能。你只需在Google Maps上找到那个地点，然后点击“分享”按钮，选择“嵌入地图”，复制它给你的<code><iframe></code>代码，直接粘贴到你的HTML文件里就行了。这个<code><iframe></code>可以调整宽度和高度，甚至设置<code>loading="lazy"</code>来优化页面加载速度，让地图在用户滚动到它附近时才开始加载。这种方式的好处是简单粗暴，不需要任何API密钥，也不用写一行JavaScript。</p><p>但如果你的需求更复杂，比如需要根据用户输入动态显示不同位置，或者在地图上标记大量点并进行筛选，甚至想自定义地图样式、添加路径规划功能，那么就必须动用Google Maps JavaScript API了。这涉及到几个步骤：</p><ol><li><strong>获取API密钥：</strong> 你需要在Google Cloud Platform上创建一个项目，然后启用Maps JavaScript API，并生成一个API密钥。这个密钥是你调用Google地图服务的凭证，务必妥善保管，并设置好API限制（比如只允许你的域名使用），以防滥用。</li><li><strong>引入API脚本：</strong> 在你的HTML文件<code><body></code>标签的末尾（或者<code><head></code>中，但推荐在<code><body></code>末尾并加上<code>defer</code>属性），引入Google Maps JavaScript API的脚本：<pre><script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script></pre><p>这里的<code>YOUR_API_KEY</code>替换成你自己的密钥，<code>initMap</code>是当API加载完成后会调用的JavaScript函数名。<code>async</code>和<code>defer</code>属性有助于优化页面加载，避免阻塞渲染。</p></li><li><strong>创建地图容器：</strong> 在HTML中放置一个<code><div></code>元素，作为地图的承载容器，给它一个ID，并确保它有明确的宽度和高度，否则地图可能无法显示。<pre><div id="map" style="max-width:100%"></div></pre></li><li><strong>初始化地图：</strong> 编写JavaScript代码来初始化地图，通常在<code>initMap</code>函数中完成。<pre>let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, // 地图中心坐标 zoom: 8, // 初始缩放级别 }); // 你可以在这里添加标记、信息窗口等 const marker = new google.maps.Marker({ position: { lat: -34.397, lng: 150.644 }, map: map, title: "Hello World!", }); }</pre><p>通过这种方式，你可以完全掌控地图的行为和外观，实现非常丰富的交互功能。</p></li></ol><h3>如何选择适合你的地图嵌入方式？</h3><p>选择哪种地图嵌入方式，说到底就是看你的需求到底有多复杂。如果你只是想在“联系我们”页面放个公司地址，或者博客文章里提一下某个地标，那毫无疑问，<code><iframe></code>嵌入是最省事、效率最高的。它就像是把Google地图的某个视图直接截图然后贴到你的网页上，简单直接，不涉及任何API密钥管理，也不用写一行JavaScript代码。对于这种静态展示，你甚至不需要担心API调用量或者潜在的费用问题，因为它走的主要是Google地图的公共嵌入服务。</p><p>但如果你的项目需要更深度的集成，比如一个房地产网站要显示大量房源位置，用户可以筛选、点击查看详情；或者一个物流跟踪系统需要实时更新车辆位置；再或者你想在地图上绘制自定义区域、热力图，甚至实现路径规划、地点搜索自动完成等高级功能，那么JavaScript API就是唯一的选择。它提供了强大的编程接口，让你能完全控制地图的加载、交互和数据展示。这当然会带来更高的开发成本和复杂度，你需要管理API密钥、处理潜在的API调用限制和计费问题，但换来的是无限的灵活性和定制能力。我个人觉得，很多时候，在项目初期，大家总想着“一步到位”用API，但其实一个简单的<code><iframe></code>就能满足80%的需求，只有当真正的交互需求浮现时，再考虑API的复杂性也不迟。</p><h3>集成Google Maps JavaScript API时常见的“坑”有哪些？</h3><p>在集成Google Maps JavaScript API的过程中，遇到一些意料之外的问题简直是家常便饭。最常见的“坑”之一，就是<strong>API密钥相关的配置问题</strong>。你可能忘记在Google Cloud Platform上启用Maps JavaScript API，或者启用了但没有正确设置API密钥的限制，比如HTTP引用器限制，导致地图在你的域名下无法加载。我见过太多次控制台报错<code>403 Forbidden</code>，一查往往就是密钥没配置好，或者没关联有效的结算账户（即使在免费额度内，也通常需要一个结算账户来监控使用情况）。有时候，API密钥暴露在公共代码中也是个隐患，虽然对于前端直接调用来说难以避免，但至少要设置好域名限制。</p><p>另一个让人头疼的问题是<strong>地图容器的样式</strong>。你辛辛苦苦写好了JavaScript代码，地图就是不显示，或者只显示一小块灰色区域。这时候，多半是你的<code><div></code>元素（地图容器）没有明确的<code>width</code>和<code>height</code> CSS属性。地图需要一个确定的尺寸才能正确渲染，否则它不知道该占据多大的空间。同时，<strong>脚本加载时机</strong>也常常是问题所在。如果你的JavaScript代码尝试在Google Maps API脚本完全加载并初始化之前就调用<code>google.maps</code>对象，那肯定会报错。使用<code>defer</code>或<code>async</code>属性，并将地图初始化函数放在全局作用域，并通过<code>callback</code>参数指定，是比较稳妥的做法。最后，<strong>调试</strong>时一定要打开浏览器开发者工具的控制台，Google Maps API通常会给出非常详细的错误信息，告诉你具体是哪个API调用失败了，或者缺少了什么参数。这些信息比任何猜测都来得直接有效。</p><h3>除了Google Maps，还有其他地图服务可以嵌入HTML吗？</h3><p>当然有，世界上的地图服务远不止Google Maps一家。根据你的项目需求、目标用户区域和对开源/商业模式的偏好，有很多替代方案可以选择。</p><p>一个非常流行的选择是<strong>OpenStreetMap (OSM)</strong>。它是一个开源的、由社区驱动的全球地图数据项目，你可以把它想象成地图界的维基百科。OSM本身只提供数据，你需要结合像<strong>Leaflet.js</strong>或<strong>OpenLayers</strong>这样的JavaScript库来渲染地图。OSM的优势在于完全免费，没有API密钥和调用限制的烦恼，而且你可以完全控制地图的样式和功能，非常适合需要高度定制化和数据隐私的项目。我个人在一些预算有限或者需要非常规地图样式的项目中，会优先考虑OSM加Leaflet的组合，它能提供令人惊讶的灵活性。缺点是，相较于Google Maps，你可能需要自己处理更多底层逻辑，比如地址解析（Geocoding）或者路线规划，通常需要集成第三方服务。</p><p>另一个值得关注的是<strong>Mapbox</strong>。它也是基于OpenStreetMap数据，但提供了非常强大的地图渲染引擎和设计工具，可以让你创建出极其美观和高度定制化的地图样式。Mapbox GL JS是其主要的JavaScript API，支持矢量瓦片，使得地图缩放和旋转非常流畅。它提供了一定的免费额度，但超出后会按使用量计费。Mapbox的优势在于其出色的视觉效果和开发者友好的API，非常适合需要品牌化地图体验的应用。</p><p>对于面向中国市场的应用，<strong>百度地图</strong>和<strong>高德地图（Amap）</strong>是不可或缺的选择。由于数据合规性和在中国境内的地图数据精度问题，Google Maps在中国的表现并不理想。百度地图和高德地图都提供了完善的JavaScript API和丰富的POI（Point of Interest）数据，功能上与Google Maps类似，包括地图显示、搜索、导航、定位等。如果你开发的应用主要服务中国用户，那么使用它们是最佳实践，但需要注意的是，它们通常需要在中国境内进行企业认证才能获得更高级的API权限。</p><p>总的来说，每种地图服务都有其独特的优势和适用场景。选择哪一个，往往需要综合考虑项目的预算、对地图功能的需求、目标用户区域以及团队对特定技术栈的熟悉程度。</p><p>以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/301544.html" title="改图鸭AI绘画教程：创意无限轻松实现" class="img_box"> <img src="/uploads/20250830/175652325668b26af8debda.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="改图鸭AI绘画教程：创意无限轻松实现">改图鸭AI绘画教程：创意无限轻松实现 </a> <dl> <dt class="lineOverflow"><a href="/article/301544.html" title="改图鸭AI绘画教程：创意无限轻松实现" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">改图鸭AI绘画教程：创意无限轻松实现</dd> </dl> </div> <div class="cateItem"> <a href="/article/301546.html" title="表单数据保留与清除方法详解" class="img_box"> <img src="/uploads/20250830/175652337368b26b6d2516f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="表单数据保留与清除方法详解"> </a> <dl> <dt class="lineOverflow"><a href="/article/301546.html" class="aBlack" title="表单数据保留与清除方法详解">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">表单数据保留与清除方法详解</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/301852.html" class="img_box" title="HTML中option标签详解与使用场景"> <img src="/uploads/20250830/175654348268b2b9faa6cfd.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML中option标签详解与使用场景"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/301852.html" class="aBlack" target="_blank" title="HTML中option标签详解与使用场景">HTML中option标签详解与使用场景</a> </dt> <dd class="cont2"> <span><i class="view"></i>168浏览</span> <span class="collectBtn user_collection" data-id="301852" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301848.html" class="img_box" title="CSS控制元素间空白与间隙主要通过以下几种方式实现：1.使用margin属性margin控制元素的外边距，用于设置元素之间的空白。.element{margin:10px;/*上右下左都为10px*/}margin-top,margin-right,margin-bottom,margin-left：分别设置上下左右的外边距。margin:10px20px;：上、下为10px，左、右为20px。2"> <img src="/uploads/20250830/175654294868b2b7e4ce6ca.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS控制元素间空白与间隙主要通过以下几种方式实现：1.使用margin属性margin控制元素的外边距，用于设置元素之间的空白。.element{margin:10px;/*上右下左都为10px*/}margin-top,margin-right,margin-bottom,margin-left：分别设置上下左右的外边距。margin:10px20px;：上、下为10px，左、右为20px。2"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 10分钟前 | <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="CSS教程">CSS教程</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/301848.html" class="aBlack" target="_blank" title="CSS控制元素间空白与间隙主要通过以下几种方式实现：1.使用margin属性margin控制元素的外边距，用于设置元素之间的空白。.element{margin:10px;/*上右下左都为10px*/}margin-top,margin-right,margin-bottom,margin-left：分别设置上下左右的外边距。margin:10px20px;：上、下为10px，左、右为20px。2">CSS控制元素间空白与间隙主要通过以下几种方式实现：1.使用margin属性margin控制元素的外边距，用于设置元素之间的空白。.element{margin:10px;/*上右下左都为10px*/}margin-top,margin-right,margin-bottom,margin-left：分别设置上下左右的外边距。margin:10px20px;：上、下为10px，左、右为20px。2</a> </dt> <dd class="cont2"> <span><i class="view"></i>485浏览</span> <span class="collectBtn user_collection" data-id="301848" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301847.html" class="img_box" title="JS函数执行时间怎么测？"> <img src="/uploads/20250830/175654281668b2b76067b3a.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JS函数执行时间怎么测？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 12分钟前 | <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a> <a href="javascript:;" class="aLightGray" title="JIT编译">JIT编译</a> <a href="javascript:;" class="aLightGray" title="函数执行时间">函数执行时间</a> <a href="javascript:;" class="aLightGray" title="performance.now()">performance.now()</a> <a href="javascript:;" class="aLightGray" title="JavaScript性能测量">JavaScript性能测量</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/301847.html" class="aBlack" target="_blank" title="JS函数执行时间怎么测？">JS函数执行时间怎么测？</a> </dt> <dd class="cont2"> <span><i class="view"></i>303浏览</span> <span class="collectBtn user_collection" data-id="301847" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301840.html" class="img_box" title="CSS子网格高级用法详解"> <img src="/uploads/20250830/175654216668b2b4d6a5e6b.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS子网格高级用法详解"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 23分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/301840.html" class="aBlack" target="_blank" title="CSS子网格高级用法详解">CSS子网格高级用法详解</a> </dt> <dd class="cont2"> <span><i class="view"></i>199浏览</span> <span class="collectBtn user_collection" data-id="301840" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301839.html" class="img_box" title="CSS平滑滚动设置方法详解"> <img src="/uploads/20250830/175654209768b2b491ccc01.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS平滑滚动设置方法详解"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 24分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/301839.html" class="aBlack" target="_blank" title="CSS平滑滚动设置方法详解">CSS平滑滚动设置方法详解</a> </dt> <dd class="cont2"> <span><i class="view"></i>289浏览</span> <span class="collectBtn user_collection" data-id="301839" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301831.html" class="img_box" title="JavaScript闭包维持定时器状态的方法"> <img src="/uploads/20250830/175654147568b2b22306b16.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript闭包维持定时器状态的方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 35分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/301831.html" class="aBlack" target="_blank" title="JavaScript闭包维持定时器状态的方法">JavaScript闭包维持定时器状态的方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>349浏览</span> <span class="collectBtn user_collection" data-id="301831" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301827.html" class="img_box" title="让表格居中的几种CSS方法"> <img src="/uploads/20250830/175654133268b2b1942e8b6.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="让表格居中的几种CSS方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 37分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/301827.html" class="aBlack" target="_blank" title="让表格居中的几种CSS方法">让表格居中的几种CSS方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>112浏览</span> <span class="collectBtn user_collection" data-id="301827" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301821.html" class="img_box" title="JS策略模式解析与实战应用"> <img src="/uploads/20250830/175654102368b2b05fd4bf4.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JS策略模式解析与实战应用"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 42分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/301821.html" class="aBlack" target="_blank" title="JS策略模式解析与实战应用">JS策略模式解析与实战应用</a> </dt> <dd class="cont2"> <span><i class="view"></i>497浏览</span> <span class="collectBtn user_collection" data-id="301821" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301820.html" class="img_box" title="CSS属性与值详解大全"> <img src="/uploads/20250830/175654100968b2b05199ed3.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS属性与值详解大全"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 42分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/301820.html" class="aBlack" target="_blank" title="CSS属性与值详解大全">CSS属性与值详解大全</a> </dt> <dd class="cont2"> <span><i class="view"></i>501浏览</span> <span class="collectBtn user_collection" data-id="301820" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301819.html" class="img_box" title="Vue.js热门论坛与社区推荐"> <img src="/uploads/20250830/175654087168b2afc7925e8.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Vue.js热门论坛与社区推荐"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 45分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/301819.html" class="aBlack" target="_blank" title="Vue.js热门论坛与社区推荐">Vue.js热门论坛与社区推荐</a> </dt> <dd class="cont2"> <span><i class="view"></i>500浏览</span> <span class="collectBtn user_collection" data-id="301819" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301815.html" class="img_box" title="JavaScript栈操作：push与pop轻松实现"> <img src="/uploads/20250830/175654058368b2aea7a70e5.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript栈操作：push与pop轻松实现"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 49分钟前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/301815.html" class="aBlack" target="_blank" title="JavaScript栈操作：push与pop轻松实现">JavaScript栈操作：push与pop轻松实现</a> </dt> <dd class="cont2"> <span><i class="view"></i>291浏览</span> <span class="collectBtn user_collection" data-id="301815" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/301804.html" class="img_box" title="JSON.stringify的作用及使用场景详解"> <img src="/uploads/20250830/175653975368b2ab6912221.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JSON.stringify的作用及使用场景详解"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/301804.html" class="aBlack" target="_blank" title="JSON.stringify的作用及使用场景详解">JSON.stringify的作用及使用场景详解</a> </dt> <dd class="cont2"> <span><i class="view"></i>104浏览</span> <span class="collectBtn user_collection" data-id="301804" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight"> <!-- 右侧广告位banner --> <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">542次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">511次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">498次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">484次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13035.html" target="_blank" title="千音漫语：智能声音创作助手，AI配音、音视频翻译一站搞定！" class="img_box"> <img src="/uploads/20250723/1753258213688098e5ef34b.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="千音漫语：智能声音创作助手，AI配音、音视频翻译一站搞定！" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13035.html" class="aBlack" target="_blank" title="千音漫语">千音漫语</a></dt> <dd class="cont1 lineTwoOverflow"> 千音漫语，北京熠声科技倾力打造的智能声音创作助手，提供AI配音、音视频翻译、语音识别、声音克隆等强大功能，助力有声书制作、视频创作、教育培训等领域，官网：https://qianyin123.com </dd> <dd class="cont2">493次使用</dd> </dl> </li> <li> <a href="/ai/13034.html" target="_blank" title="MiniWork：智能高效AI工具平台，一站式工作学习效率解决方案" class="img_box"> <img src="/uploads/20250716/17526246026876edda8c2a4.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MiniWork：智能高效AI工具平台，一站式工作学习效率解决方案" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13034.html" class="aBlack" target="_blank" title="MiniWork">MiniWork</a></dt> <dd class="cont1 lineTwoOverflow"> MiniWork是一款智能高效的AI工具平台，专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具，提供精准智能解决方案，让复杂工作简单高效。 </dd> <dd class="cont2">461次使用</dd> </dl> </li> <li> <a href="/ai/13033.html" target="_blank" title="NoCode (nocode.cn)：零代码构建应用、网站、管理系统，降低开发门槛" class="img_box"> <img src="https://s0.wp.com/mshots/v1/nocode.cn?w=383&h=328" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="NoCode (nocode.cn)：零代码构建应用、网站、管理系统，降低开发门槛" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13033.html" class="aBlack" target="_blank" title="NoCode">NoCode</a></dt> <dd class="cont1 lineTwoOverflow"> NoCode (nocode.cn)是领先的无代码开发平台，通过拖放、AI对话等简单操作，助您快速创建各类应用、网站与管理系统。无需编程知识，轻松实现个人生活、商业经营、企业管理多场景需求，大幅降低开发门槛，高效低成本。 </dd> <dd class="cont2">482次使用</dd> </dl> </li> <li> <a href="/ai/13032.html" target="_blank" title="达医智影：阿里巴巴达摩院医疗AI影像早筛平台，CT一扫多筛癌症急慢病" class="img_box"> <img src="/uploads/20250716/1752631805687709fd1f103.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="达医智影：阿里巴巴达摩院医疗AI影像早筛平台，CT一扫多筛癌症急慢病" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13032.html" class="aBlack" target="_blank" title="达医智影">达医智影</a></dt> <dd class="cont1 lineTwoOverflow"> 达医智影，阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”，仅一次CT扫描即可高效识别多种癌症、急症及慢病，为疾病早期发现提供智能、精准的AI影像早筛解决方案。 </dd> <dd class="cont2">502次使用</dd> </dl> </li> <li> <a href="/ai/13031.html" target="_blank" title="智慧芽Eureka：更懂技术创新的AI Agent平台，助力研发效率飞跃" class="img_box"> <img src="https://s0.wp.com/mshots/v1/eureka.zhihuiya.com?w=383&h=328" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="智慧芽Eureka：更懂技术创新的AI Agent平台，助力研发效率飞跃" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13031.html" class="aBlack" target="_blank" title="智慧芽Eureka">智慧芽Eureka</a></dt> <dd class="cont1 lineTwoOverflow"> 智慧芽Eureka，专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景，通过专家级AI Agent精准执行任务，智能化工作流解放70%生产力，让您专注核心创新。 </dd> <dd class="cont2">490次使用</dd> </dl> </li> </ul> </div> <!-- 相关文章 --> <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/72840.html" class="aBlack" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></dt> <dd> <span class="left">2023-11-03</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/76259.html" class="aBlack" title="使用微信小程序实现图片轮播特效">使用微信小程序实现图片轮播特效</a></dt> <dd> <span class="left">2023-11-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/83771.html" class="aBlack" title="解析sessionStorage的存储能力与限制">解析sessionStorage的存储能力与限制</a></dt> <dd> <span class="left">2024-01-11</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/85057.html" class="aBlack" title="探索冒泡活动对于团队合作的推动力">探索冒泡活动对于团队合作的推动力</a></dt> <dd> <span class="left">2024-01-13</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/91359.html" class="aBlack" title="UI设计中为何选择绝对定位的智慧之道">UI设计中为何选择绝对定位的智慧之道</a></dt> <dd> <span class="left">2024-02-03</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">苏ICP备2023003363号-1</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div> <!-- 微信登录弹窗 --> <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div> <!-- 微信登录 --> <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span> <!-- <div class="refreshBox"> <p>二维码失效</p> <button type="button" class="create_wxqrcode">刷新1111</button> </div> --> </div> <div class="tip">打开微信扫一扫，快速登录/注册</div> </div> <div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div> </div> <!-- 密码登录 --> <div class="loginInfo passwordLogin"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();"> <div class="tip">微信登录更方便</div> </div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem loginFormLi curr">密码登录</li> <li class="selfTabItem registerFormBox ">注册账号</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont loginFormBox" style="display: block;"> <form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login"> <input type="hidden" name="url" value="//www.17golang.com/article/301545.html"/> <input type="hidden" name="__token__" value="d2618a7ea11660e2ece113c2c15d3f67" /> <div class="form-group" style="height:70px;"> <input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off"> </div> <div class="form-group" style="height:70px;"> <input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="other"> <a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a> </div> <div class="loginBtn mt25"> <button type="submit">登录</button> </div> </form> </div> <div class="selfTabCont registerFormBox" style="display: none;"> <form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register"> <input type="hidden" name="invite_user_id" value="0"/> <input type="hidden" name="url" value="//www.17golang.com/article/301545.html"/> <input type="hidden" name="__token__" value="d2618a7ea11660e2ece113c2c15d3f67" /> <div class="form-group" style="height:70px;"> <input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱"> </div> <div class="form-group" style="height:70px;"> <input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符"> </div> <div class="form-group" style="height:70px;"> <input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="loginBtn"> <button type="submit">注册</button> </div> </form> </div> </div> </div> <div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div> </div> <!-- 重置密码 --> <div class="loginInfo passwordForget"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem">重置密码</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont"> <form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate"> <div style="height:70px;"> <input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px; position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a> </span> </div> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码"> <div class="loginBtn mt25"> <button type="submit">重置密码</button> </div> </form> </div> </div> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> </body> </html>
