javascript - initMap不是函数(ASP/NET)

我有js脚本文件。我在哪里使用Google热图

这是js文件的代码

  $(document).ready(function () {
    //map initialization
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'),
            {
                zoom: 5,
                center: { lat: 51.0742853, lng: 11.0294547 },
                mapTypeId: 'roadmap'
            });
        var centerControlDiv = document.createElement('div');
        var centerControlDiv2 = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);
        var centerControl2 = new CenterControl1(centerControlDiv, map);

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
        getDriving();
    }
    });

在视图中，我有脚本

script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">

运行项目时出现initMap is not a function错误。我该如何解决。

删除callback=initMap无法解决问题

这是脚本的定义方式

  <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">
</script>

<script src="~/Scripts/DataTables-1.10.2/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css" />
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="~/Scripts/Datepicker-Languages/datepicker-languages.js"></script>
<link href="~/Content/Styles/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
<script src="~/Scripts/jQuery-ui-extensions/weekMonthDatepicker.js?v=1.0.0.0"></script>

<script src="~/Scripts/Reports/Heatmap.js"></script>

此行中的InitMap <script src="~/Scripts/Reports/Heatmap.js"></script>

最佳答案

删除异步，该异步告诉浏览器独立于其余正在加载的代码来解析代码，而仅依赖于延迟，该延迟告诉浏览器等到文档加载后再执行。

  <script defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">

或将文件中脚本的顺序更改为：

<script src="~/Scripts/Reports/Heatmap.js"></script>
<script async
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCea6mL2cqwVid2ESIjuJ0C31RbNVQNPY0&libraries=visualization&callback=initMap">
</script>

您也不需要等待文档加载（也不想）来定义函数，因此删除第一行和最后一行。

   //map initialization
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'),
            {
                zoom: 5,
                center: { lat: 51.0742853, lng: 11.0294547 },
                mapTypeId: 'roadmap'
            });
        var centerControlDiv = document.createElement('div');
        var centerControlDiv2 = document.createElement('div');
        var centerControl = new CenterControl(centerControlDiv, map);
        var centerControl2 = new CenterControl1(centerControlDiv, map);

        centerControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
        getDriving();
    }