$（）不是函數調用模式對話框谷歌地圖調整大小

Question

我有以下錯誤Uncaught type error, $() is not a function，突出顯示$("#mapModal").on("shown.bs.modal", function() {......... 我該怎麼辦？

$("#mapModal").on("shown.bs.modal", function() { 
    google.maps.event.trigger(map, "resize"); 
}); 

我已經加入如下：

<link rel="stylesheet" type="text/css" href="/mapps/assets/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="/mapps/assets/js/bootstrap.min.js"></script> 
    <script type="text/javascript" language="javascript" src="/mapps/assets/js/jquery.tools.min.js"></script> 

報價：我有逆轉的jQuery和jQuery工具的順序，它正在努力顯示谷歌地圖。另一方面，它有以下新的JavaScript錯誤。

Answer 1

首先，你應該包括所有的庫文件然後代碼。

<link rel="stylesheet" type="text/css" href="/mapps/assets/css/bootstrap.min.css"> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script type="text/javascript" language="javascript" src="/mapps/assets/js/jquery.tools.min.js"></script> 
<script src="/mapps/assets/js/bootstrap.min.js"></script> 

庫文件的排序也很重要。

然後添加代碼

$("#mapModal").on("shown.bs.modal", function() { 
    google.maps.event.trigger(map, "resize"); 
}); 

請使用jQuery.min.js代替jQuery slim version

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jqu‌​ery.min.js"></script‌​>

希望這會幫助你。