当我展开手风琴面板时,谷歌地图数据将不会出现
Google Map Data will not appear when i expand the accordion panel
当我在我的网页上展开我的导航面板时,谷歌地图不显示任何东西,它只是显示为灰色。只有当我打开控制台地图才会出现。我需要改变我的代码地图出现与它的标记和位置,我已经编程它去。当你把地图放在面板外面时,它会完美地工作。如果有人可以扩展我写的代码来帮助,那就太好了。
HTML代码: <button class="accordion">Navigation</button>
<div class="panel">
<div id="map" style="width:60%;height:300px"></div>
</div>
CSS Code:
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block;
}
脚本代码:
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapOptions = {center: myCenter, zoom: 15};
var map = new google.maps.Map(mapCanvas,mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
icon: "poi.png"
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB37us778WYnwNjHftUm3oL2oduV_WOt_E&callback=myMap"></script>
您的手风琴显示处理程序只需要触发地图大小调整:
google.maps.event.trigger(map, "resize");
第一个脚本块的代码变成:
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
google.maps.event.trigger(map, "resize"); //added
}
}
</script>
工作小提琴:https://jsfiddle.net/vv0xtbrw/(见第14行);
相关文章:
- 不显示带有本地json文件数据的谷歌地图脚本
- 缓存谷歌地图数据
- 谷歌地图/Angular JS:地图更新并不总是反映数据,并且可以't删除标记
- 将iPhone位置数据输入谷歌地图
- 使用来自URL的JSON数据来显示谷歌地图标记-如何
- 基于数据的谷歌地图API标记
- 如何通过使用谷歌地图从文本字段提交来修改javascript对象中的数据
- 谷歌地图获取kml数据并显示它们
- 谷歌地图/融合表Javascript HTML赢得't显示/可视化所有多边形数据(通过色标)
- 在谷歌地图的JSON数据中循环
- 谷歌地图API-在从ajax页面加载新数据之前清除标记、多段线
- 谷歌地图标记不显示ajax json数据
- 将JSON文件中的数据加载到谷歌地图中的地图标记中
- 当点击处理程序添加到谷歌地图圆圈标记时,无法访问对象数据
- 谷歌地图数据类型抛出类型错误:can't将未定义转换为对象
- 如何执行Ajax GET请求以从rails获取数据并将其传递给javascript(谷歌地图)
- 谷歌地图样本阅读数据
- 在谷歌地图中绘制闪电数据
- 试图在网站上抓取谷歌地图api生成的动态数据,但正常抓取返回空白
- 我可以在谷歌地图上使用OpenStreetMap数据创建获取路线吗?如何