【发布时间】：2017-08-12 06:03:51
【问题描述】：
我已经多次搜索我的问题的答案，但我得到的所有答案都没有帮助。
这里是场景。我在 MySQL db 中有带 lat/long 的字段数据。我通过 php 使用 Jquery Ajax 查询数据库。通过单击主菜单中的 ERF 来显示结果数据，然后在两个 Bootstrap 选项卡中显示数据。一个选项卡以表格形式显示数据，另一个选项卡显示地图。请参阅下面的代码。
我的问题是，地图没有显示。事实上，地图选项卡根本不起作用。有人可以帮忙吗？
我使用 Bootstrap、JQuery 和 AJAX。
我从控制台收到此错误：“InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama”。不知道这是什么意思？
<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> <style>
#mapcanvas {
width: 100%;
height: 500px;
}
</style><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>【问题讨论】：
标签： javascript php jquery mysql twitter-bootstrap