Internet Explorer中的谷歌地图

Google Maps in Internet Explorer

本文关键字：谷歌地图 Explorer Internet      更新时间：2024-07-01

有点卡在这里。我在我的网页上添加了一个非常简单的谷歌地图，并使用基本的javascript API来实现这一点。在chrome中一切都很好，但在internet explorer中偶尔也能正常工作。出现的错误是：

SCRIPT5022:InvalidValueError:initMap不是函数js，第102行字符390

该错误指的是对谷歌地图API的调用，而不是在我的js中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Under Construction</title>
  <link rel="shortcut icon" href="images/betterlogo.ico" type="image/x-icon">
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/thumbnails.css">
  <link rel="stylesheet" href="css/main.css">
  <!-- JS -->
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script src='js/device.min.js'></script>
</head>

      <div class="col-md-6 col-sm-12 col-xs-12">
        <div class="container-fluid">
          <div id="map-canvas"></div>
        </div>
      </div>

&lt--还有一些没人需要看到的代码填充程序，-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ui.accordion.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFmJX1o4ocAPluAPlDWlh-VX_35iwc23o&libraries=places&callback=initMap" async defer></script>
<script src="js/main.js"></script>

和我的javascript：

function initMap() {
  var myLatLng = {lat:40.4917507, lng:-74.2971267};
  var map = new google.maps.Map(document.getElementById('map-canvas'),{
  center: myLatLng,
  zoom: 15
  });
  var marker = new google.maps.Marker({
    position: myLatLng,
    map:map,
    title:"abc"
  });
  google.maps.event.addDomListener(window, "resize", function(){
    var center=map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  })
}

所以我将main.js文件移到了对googlemaps API的调用之上，它解决了这个问题。我假设调用是在加载所有javascript之前进行的，因此对mapsInit的回调还不存在。如果我的想法正确/不正确，我希望得到一些反馈。感谢

<script src="js/main.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFmJX1o4ocAPluAPlDWlh-VX_35iwc23o&libraries=places&callback=initMap" async defer></script>

我得到了与上面相同的错误，但标记的答案没有帮助。如果有人只在Internet explorer上收到initMap错误，可能是因为您使用的JavaScript对Internet explorer来说太现代了，包括"模板文字"answers"箭头函数"。我仔细检查了我的代码，并用旧代码替换了它们，从而消除了这个错误。希望这能节省我调试的时间。。。

相关文章：