谷歌地圖需要很長時間才能在ie11中渲染

Question

隨附的HTML在Chrome和Mozzilla瀏覽器中可以非常快速地呈現。 如果我嘗試在IE11中加載它，則會遇到一些超時錯誤，並且30秒后，地圖最終呈現出來。

我已經嘗試了IE11中的各種設置，但是沒有運氣。 當我在調試器模式下使用開發人員工具運行時。 我在以下函數中收到錯誤InvalidValueError：not a string 3次

function wf(a,b){return function(c){if(a(c))return c;throw qf(b||""+c);}}function xf(a){var b=arguments;return function(a){for(var d=[],e=0,f=b[H];e<f;++e){var g=b[e];try{(g.Ff||g)(a)}catch(h){if(!(h instanceof pf))throw h;d[F](h.message);continue}return(g.then||g)(a)}throw qf(d[rd]("; and "));}}function yf(a,b){return function(c){return b(a(c))}}function zf(a){return function(b){return null==b?b:a(b)}}function Af(a){return function(b){if(b&&null!=b[a])return b;throw qf("no "+a+" property");}}

在按F5繼續三倍后，MAP最終呈現。

這是HTML。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
 Copyright 2010 Google Inc. 
 Licensed under the Apache License, Version 2.0: 
 http://www.apache.org/licenses/LICENSE-2.0 
 -->
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<title>Google Maps JavaScript API v3 Example: Optimized Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var origin = " 1837 N. Kinser Pike, Bloomington, IN 47404 ";
  var destination = " 520 W NORTHLANE DR, BLOOMINGTON IN 47404 ";
  var waypoints = [];
  var markers = [];
  var directionsVisible = false;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var store = new google.maps.LatLng(35.930251, -86.824265);
    var myOptions = {
      zoom:14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: store,
      panControl: true,
      zoomControl: true,
      scaleControl: true
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    calcRoute();
  }

  function addMarker(latlng) {
    markers.push(new google.maps.Marker({
      position: latlng, 
      map: map,
      icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(markers.length + 65) + ".png"
    }));    
  }

  function calcRoute() {
    if (origin == null) {
      alert("Click on the map to add a start point");
      return;
    }

    if (destination == null) {
      alert("Click on the map to add an end point");
      return;
    }

    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        optimizeWaypoints: true,
        avoidHighways: true,
        avoidTolls: true
    };
    directionsService.route(request, function(directionsresult, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(directionsresult);
      } 
    });
    directionsVisible = true;
  }

  function updateMode() {
    if (directionsVisible) {
      calcRoute();
    }
  }

  function printTextDirections() {
    for (var i = 0; i < directionsresult.routes.length; i++) {
      for (var j = 0; j < directionsresult[i].legs.length; j++) {
        alert(directionsresult.routes[i].legs[j]);
      }
    }
  }

</script>
</head>
<body onload="initialize()" style="font-family: sans-serif;">
   <div id='map_canvas' style='width: 65%; height: 580px; float:left; border: 1px solid black;'></div>  
   <div id='directionsPanel' style='width: 30%; height:580px; float:right; border; 1px solid black;'></div>
</body>
</html>

Answer 1

我在3.19中指定了Google地圖版本，問題已解決。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.19"></script>

由於沒有指定版本，因此我正在獲取實驗版本。