Question

我已多次搜索我的问题的答案，而我得到的所有答案都无济于事。

以下是该方案。我在MySQL db中有lat / long的字段数据。我通过php使用Jquery Ajax查询数据库。通过单击主菜单中的ERF显示生成的数据，然后在两个Bootstrap选项卡中显示数据。一个选项卡以表格形式显示数据，另一个选项卡显示地图。请参阅下面的代码。

我的问题是，地图没有显示。实际上，Map选项卡根本不起作用。有人可以帮忙吗？

我使用Bootstrap，JQuery和AJAX。

我从控制台收到此错误：＆＃34; InvalidValueError：setMap：不是Map的实例;而不是StreetViewPanorama＆＃34;的实例。不确定这意味着什么？

＆＃13;

	<script>
		function displayErfsTable(erfArray) {
			$("#erfTable").append("<thead>");
				$("#erfTable").append("<tr>");
				$("#erfTable").append("<th>ERF No</th>");
				$("#erfTable").append("<th>area Name</th>");
				$("#erfTable").append("<th>lat</th>");
				$("#erfTable").append("<th>long</th>");	
				$("#erfTable").append("</tr>");	
			$("#erfTable").append("</thead>");
		    // Display each row in the ERFs Table 
		    for( i = 0; i < erfArray.length; i++ ) {
	  				var  erfRow = erfArray[i];
	  			$("#erfTable").append("<tr>");
			    	$("#erfTable").append("<td> " + erfRow['erf_no'] + " </td>");
			    	$("#erfTable").append("<td> " + erfRow['an'] + " </td>");
			    	$("#erfTable").append("<td> " + erfRow['latitude'] + " </td>");    	    	
			    	$("#erfTable").append("<td> " + erfRow['longitude'] + " </td>");    	
				$("#erfTable").append("</tr>");
			}
			//
			$("#erfTable").append("<thead>");
				$("#erfTable").append("<tr>");
					$("#erfTable").append("<th>ERF No</th>");
					$("#erfTable").append("<th>area Name</th>");
					$("#erfTable").append("<th>lat</th>");
					$("#erfTable").append("<th>long</th>");	
				$("#erfTable").append("</tr>");	
			$("#erfTable").append("</thead>");	
		}

		function displayErfsMap(erfArray) {
			$(function() {
				debugger;
				//console.log(map);
			    new Maplace({
			            map_div:'#map_canvas',
			            show_markers: false,
			            locations:[{
			                lat: -31.069914,
			                lon: 28.35298,
			                html:'ERF1',
			                zoom:16
			            }]
			        }).Load();   
			});
		}
	</script>
  
  	<script type="text/javascript">
		var i;
		$(document).ready(function() {
			$("#id_erf_main_menu").click(function (e) {
				debugger;
				e.preventDefault();
				jQuery.ajax({
					type: "POST", // HTTP method POST or GET
					url: "jq_erf_dbquery.php", //Where to make Ajax calls
					dataType:"json", // Data type, HTML, json etc.
					//data:myData, //Form variables
					success:function(erfArray){
						//Display ERFS Table
						displayErfsTable(erfArray);
						//console.log(erfArray);
						displayErfsMap(erfArray);
					},
				});
			});
		});	
	</script>

＆＃13;

	<style>
		#mapcanvas {
		    width: 100%; 
		    height: 500px;
		}
	</style>

＆＃13;

<body>
	<div id="main_menu">
		<nav class="navbar navbar-default" style="min-height: 0;">
			<!-- Main Menu -->
			<ul class="nav nav-pills">
				<li class="active"><a data-toggle="tab" href="#municipalities">Municipalities</a></li>
				<li><a data-toggle="tab" href="#contracotrs">Contractors</a></li>
				<li><a data-toggle="tab" href="#fws">Field Workers</a></li>
				<li><a data-toggle="tab" href="#devices">Devices</a></li>
				<li><a data-toggle="tab" href="#erfs" id="id_erf_main_menu">ERFs</a></li>
				<li><a data-toggle="tab" href="#wos">Works Orders</a></li>
				<li><a data-toggle="tab" href="#dashboard">Dashboard</a></li>
				<li><a data-toggle="tab" href="#assets">Assets</a></li>
			</ul>
		</nav><!-- Main Menu --> 
	</div>

	<div class="tab-content">
		<div id="municipalities" class="tab-pane fade in active">
			<p>Municipalities Windows</p>
		</div>
		<div id="contracotrs" class="tab-pane fade">
			<p>Contractors Windows</p>
		</div>
		<div id="fws" class="tab-pane fade">
			<p>Field Workers Windows</p>
		</div>
		<div id="devices" class="tab-pane fade">
			<p>Devices Windows</p>
		</div>
		<div id="wos" class="tab-pane fade ">
			<p>WOs  goes here.</p>
		</div>
		<div id="dashboard" class="tab-pane fade">
			<p>Dashboard data displays here.</p>
		</div>
		<div id="assets" class="tab-pane fade">
			<p>Assets data displays here.</p>
		</div>				
		<div id="erfs" class="tab-pane fade" >
			<ul class="nav nav-tabs" id="erfTab">
			  <li class="active"><a href="#tab1">ERF Table</a></li>
			  <li><a href="#tab2">ERF Map</a></li>
			</ul>
			<div class="tab-content">
			  	<div class="tab-pane active" id="tab1">
			  	<p> ERF Table tab </p>
 	          		<table id="erfTable" class="table table-striped" >
 	          		</table>
			  	</div>
				<div class="tab-pane" id="tab2">
				<p> ERF Map tab </p>
				<div id="mapcanvas"></div>						
			</div>						
		</div>
	</div>

＆＃13;

Answer 1

好的，我找到了答案。实际上，该解决方案在某些响应中已提供。只是没看好。道歉。

我只需在

中加入“data-toggle =”标签“。见下文

------------------------------------------------------------------
<ul class="nav nav-tabs" data-tabs="tabs" id="erfTab">
    <li class="active"><a href="#tab1" data-toggle="tab">ERF Table</a></li>
    <li><a href="#tab2" data-toggle="tab">ERF Map</a></li>
</ul>
------------------------------------------------------------------

我现在的新问题是，Maplace Google Map没有加载。我已经包含了“maplace.min.js”文件，并且可以在开发人员控制台中看到它已被访问。但地图仍未加载。

有人可以帮我点一下吗？

Answer 2

好的伙计们。我再次找到了Maplace Google Map未加载的答案。

它与div map容器有关。我已经命名了我的地图容器div＆＃34; mapcanvas＆＃34;。出于某种原因，这就是问题所在。我将div名称更改为Maplace.js中使用的默认名称（＆＃34; gmap＆＃34;）然后突然发挥作用。

有趣的是，当我改回＆＃34; mapcanvas＆＃34;时，它继续工作。

有人可以解释一下吗？

现在出现的新问题是，地图绘制不正确并且没有居中。我现在必须解决这个问题。让我们去.....

Maplace.js Google Map不会显示在引导选项卡上

2 个答案: