Internet Explorer中的Google地图

Question

Internet Explorer中的Google地图

Jgo*_*o83 1 javascript internet-explorer google-maps

有点卡在这里.我在我的网页上添加了一个非常简单的谷歌地图,并使用基本的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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

< - 一些没人需要看的代码填充, - >

<!-- 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>

Run Code Online (Sandbox Code Playgroud)

和我的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);
  })
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jgo*_*o83 5

所以我将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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	2351 次
最近记录：	8 年，4 月前