$（）不是函数调用模式对话框谷歌地图调整大小

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‌​>

希望这会帮助你。