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

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

希望这会对你有所帮助。