jquery - 如何在基本的 html 框架中设置 gmaps.js
问题描述
每个人
我在一个小项目中设置 gmap 时遇到了一些麻烦。
请注意,未正确输入 api 密钥。
我只是在他们的文档中复制了他们的一个示例。
<html>
<head>
<title>Test App</title>
<script src="js/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZWTTkguiQpNFtckx_x_x_x_xI&libraries=places"
async defer></script>
<!-- <script src="http://maps.google.com/maps/api/js"></script> -->
<script src="./js/gmaps.js"></script>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/map.css">
<script type="text/javascript">
var map;
$(function(){
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333,
zoomControl : true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : false,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false
});
});
</script>
<style>
body {
font-family : 'Helvetica Neue','arial',sans-serif;
font-size : 15px;
}
#map {
height :100%;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-2x mb-2" style="font-size: 20px;">
Mapp
</h1>
<h3>How it works ?</h3>
<!-- insert map -->
<div id="map"></div>
</body>
</html>
当我尝试打开 google chrome 开发者工具时,出现错误提示:
谷歌地图 API 是必需的。请注册以下 JavaScript 库https://maps.googleapis.com/maps/api/js。
解决方案
问题:
- 发布的 HTML 中有错字(缺少 的结尾
</div>
)<div class="container">
。 - CSS 不适用于百分比大小,它需要定义包含元素的大小(可以通过定义来完成
html, body { height: 100%; }
,请参阅相关问题:Responsive Google Maps v3 - Cannot get 100% height
代码片段:
var map;
$(function() {
map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333,
zoomControl: true,
zoomControlOpt: {
style: 'SMALL',
position: 'TOP_LEFT'
},
panControl: false,
streetViewControl: false,
mapTypeControl: false,
overviewMapControl: false
});
});
body {
font-family: 'Helvetica Neue', 'arial', sans-serif;
font-size: 15px;
}
.container {
height: 70%;
}
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/hpneo/gmaps@master/gmaps.js"></script>
<div class="container">
<h1 class="text-2x mb-2" style="font-size: 20px;">
Mapp
</h1>
<h3>How it works ?</h3>
<!-- insert map -->
<div id="map"></div>
</div>
推荐阅读
- sql - 在一组日期之间查找季度结束日期 - Oracle SQL
- bootstrap-4 - 行中的引导图像对齐
- google-pay - 在没有 UI 的情况下生成 Google Pay 令牌
- android - 在android中的方向更改期间无法恢复表行
- sql - ORacle KEEP DENSE_RANK FIRST 的 Postgres 转换
- c# - 直接部署到 SQL Server 的集成服务
- html - 尝试在每个 50/50 100%Width 旁边创建带有图像和文本框的可堆叠容器?
- c++ - 基于预加载器的锁分析器中的“Futex 工具返回了意外的错误代码”
- java - AWS CDK - 如何防止它创建默认目标组?
- sql - SQL - 与给定 id 和日期的最新数据的 LEFT JOIN