如何在初始化期间在Google Maps API上动态设置缩放值
How to dynamically set zoom value on Google Maps API during initialization
我有如下代码。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<input type="hidden" id="zoom_data" value="8">
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: $('zoom_data').val()
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
但地图上一片空白。我只想在本地动态设置缩放,而不是从服务器。有什么建议吗?
尝试下面的代码。您需要使用document.getElementById()来获取隐藏字段的值,然后将其转换为数字,然后再将其用作缩放参数。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<input type="hidden" id="zoom_data" value="8">
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
var zoom = document.getElementById('zoom_data').value;
var nZoom = Number(zoom);
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: nZoom
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
希望它能有所帮助!
相关文章:
- HTML范围:动态设置值属性
- 无法使用PHP动态设置下拉列表中的值
- 如何在AngularJS应用程序的主体上动态设置溢出
- 是否可以在调用时动态设置Jquery Accordion的活动面板
- 动态设置谷歌地图缩放
- 动态设置动态创建的元素的宽度
- 如何根据两个不同的输入动态设置链接的路径
- 在使用 Django 静态文件时动态设置映像时,只有绝对路径才能与 jquery 一起使用
- 动态设置页面的背景图像
- 进度条.js动态设置文本
- jQuery timepicker:如何动态设置输入字段的minTime
- 使用Javascript动态设置onKeyUp属性
- 如何保存从单击this.nameClass动态设置的本地存储
- 使用vue.js动态设置v-for
- 如何动态设置填充并在不刷新的情况下显示它
- 在剑道网格中,我可以用一个函数动态设置列属性吗
- Symfony sfValidators:动态设置是否需要值
- 根据移动设备屏幕大小动态设置HighCharts marginTop
- HTML图像布局使用PHP变量,该变量是用JavaScript动态设置的〔o r…〕
- jqgrid在条件下动态设置单元格可编辑false