Question

我完全按照google map javascript api docs给出的编码结构。

我的代码如下：

＆＃13;

<div id="googleMap" style="height:400px;width:100%;"></div>
		<script>

			function initMap() {
				var uluru = {lat: <?php echo $row->lat;?>, lng: <?php echo $row->lng;?>};
				var map = new google.maps.Map(document.getElementById('googleMap'), {
				zoom: 10,
				center: uluru
				});
				var marker = new google.maps.Marker({
				position: uluru,
				map: map,
				title: '<?php echo $row->location;?>'
				});
				}



				</script>
				<script async defer
				src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCLd0QoINJ8KgKpdNTqM-FIHY3svBFbTbQ&callback=initMap">
				</script>

＆＃13;

您可以访问：https://www.eventspub.com/eventview.php?eid=120 并单击位置选项卡以查看空白地图页面。只有按下F12（在Chrome中）才有效。请指教。

Answer 1

问题在于模板选项卡模块隐藏了元素并且不会运行initMap（）函数。

我将地图显示代码复制到标签外：

 <div id="googleMap" style="height:400px;width:100%;display: none; "></div>
 <script>

		function initMap() {
		  var uluru = {lat: <?php echo $row->lat;?>, lng: <?php echo $row->lng;?>};
		  var map = new google.maps.Map(document.getElementById('googleMap'), {
		    zoom: 10,
	     center: uluru
		  });
		  var marker = new google.maps.Marker({
		    position: uluru,
		    map: map,
		    title: '<?php echo $row->location;?>'
		  });
		}



 </script>

 <script async defer src="//maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap"></script>

当onclick事件发生时，现在在Tab位置按钮中有一个javascript函数：

<li ><a href="#h2tab3" role="tab" data-toggle="tab" onclick="showCustomMap()"><i class="fa fa-envelope pr-5"></i>Location Map</a></li>

现在JS脚本显示div map元素并调用initMap（）函数：

function showCustomMap() {

		document.getElementById('googleMap').style.display = "block";
		initMap();

	}
	function hideCustomMap() {

		document.getElementById('googleMap').style.display = "none";

	}

此外，当单击其他选项卡以隐藏独立地图div时，将调用hideMap（）函数。

地图运作完美无瑕。感谢Jaromanda X帮助我诊断问题。

仅在按下F12

1 个答案: