所以我在我正在做的第一个项目中使用谷歌地图API ...所以是的我是新的,如果这是基本的或明显的我很抱歉,但我无法找到明确的答案或方向.以下是我在Google上发现的有关安全使用API密钥的文档.
安全使用API密钥的最佳实践
在应用程序中使用API密钥时,请注意保护它们的安全.公开泄露您的凭据可能会导致您的帐户遭到入侵,这可能会导致您的帐户产生意外费用.要确保API密钥安全,请遵循以下最佳做法:
不要直接在代码中嵌入API密钥:嵌入代码中的API密钥可能会意外地暴露给公众 - 例如,如果您忘记从共享的代码中删除密钥.您可以将它们存储在环境变量或应用程序源树之外的文件中,而不是将API密钥嵌入应用程序中.不要将API密钥存储在应用程序源代码树中的文件中:如果将API密钥存储在文件中,请将文件保留在应用程序的源代码树之外,以帮助确保密钥不会在源代码控制系统中结束.如果您使用公共源代码管理系统(如GitHub),这一点尤为重要.限制您的API密钥仅由IP地址,引荐来源网址和需要它们的移动应用程序使用:通过限制可以使用每个密钥的IP地址,引荐来源网址和移动应用程序,您可以减少受损API的影响键.您可以通过打开"凭据"页面指定可以使用控制台中每个键的主机和应用程序,然后使用所需的设置创建新的API密钥,或者编辑API密钥的设置.删除不需要的API密钥:为了最大限度地减少您的攻击风险,请删除不再需要的任何API密钥.定期重新生成API密钥:您可以通过单击每个密钥的"重新生成密钥"从"Cloud Platform控制台凭据"页面重新生成API密钥.然后,更新您的应用程序以使用新生成的密钥.生成替换密钥后,旧密钥将继续工作24小时.在公开发布之前检查您的代码:在公开代码之前,请确保您的代码不包含API密钥或任何其他私人信息.
现在我的问题是我无法弄清楚如何在我的网站上加入谷歌地图而不直接把它放在代码中.现在我的API在我的index.html中是这样的:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
但这又是我的代码直接在世界上看到我认为是错误的方式.
我有一个汉堡包菜单几乎完成只有1个错误/问题,我无法弄清楚.我的导航链接到主页上的不同区域.因此,在主页上,用户可以单击导航链接,该链接将立即将其下移到页面上的所需位置.
我的问题是因为没有加载所以一旦用户点击导航链接他们被带到该位置但下拉菜单将不会关闭.我尝试在JS中添加.hide,它隐藏了点击链接的下拉列表,但这创建了我的新问题.
用户单击其中一个导航链接后,它会隐藏菜单,但再次单击菜单图标时,菜单根本不会打开.在开发工具中,我看到在点击其中一个导航链接时,它被赋予了显示风格:无,所以我觉得问题可能就在那里.感谢您的帮助,如果需要任何其他信息,请告诉我们!
HTML:
<nav class="navbar navbar-light navbar-fixed-top">
<div class="wrapping container-fluid">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav navbar-nav float-sm-right mr-0 menu">
<li class="nav-item">
<span class="sr-only"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workshops">Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#locations">Location</a>
</li>
<li class="nav-item">
<a class="nav-link last-link" href="#register">Register</a>
</li>
</ul>
<a class="navbar-brand" href="#home"><img class="logo" src="img/Logo.png" alt=""></a>
</div>
</nav>
这个菜单的CSS:
.menu{
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.open{
height: 295px;
} …