Mapplace.js 谷歌地图不会显示在引导选项卡上
Posted
技术标签:
【中文标题】Mapplace.js 谷歌地图不会显示在引导选项卡上【英文标题】：Maplace.js Google Map wont display on the bootstrap tab 【发布时间】：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>【问题讨论】：
【参考方案1】：好的，我找到了答案。事实上，在一些回复中早先提供了解决方案。只是看起来不太对。我很抱歉。
我只需要在
中包含“data-toggle="tab" 。见下文------------------------------------------------------------------
<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>
------------------------------------------------------------------我现在的新问题是，Mapplace 谷歌地图没有加载。我已经包含了“maplace.min.js”文件，并且可以在开发者控制台中看到它被访问了。但地图仍未加载。
有人可以帮我试一下吗？
【讨论】：
【参考方案2】：好的，伙计们。我再次找到了 Mapplace Google Map not loading 的答案。
这与 div 地图容器有关。我已将我的地图容器 div 命名为“mapcanvas”。出于某种原因，这就是问题所在。我将 div 名称更改为 Maplace.js 中使用的默认名称（“gmap”），然后它突然起作用了。
令人惊讶的是，当我改回“mapcanvas”时，它继续工作。
有人可以解释一下吗？
现在的新问题是，地图绘制不正确且未居中。我现在必须解决这个问题。走吧……
【讨论】：
以上是关于Mapplace.js 谷歌地图不会显示在引导选项卡上的主要内容，如果未能解决你的问题，请参考以下文章