Google地图花费很长时间才能呈现ie11 [英] Google maps taking a long time to render in ie11

问题描述

在Chrome和Mozzilla浏览器中，所附的HTML格式非常快速。如果我尝试在IE11中加载它，我会收到几个超时错误，并在30秒后最终呈现地图。

我试过IE11中的各种设置，但没有运气。当我在调试器模式下使用开发人员工具运行时。我得到错误
InvalidValueError：不是以下函数中的字符串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   

点击F5继续三次MAP最终呈现。

以下是HTML。

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Strict // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> 
 <！ -  
版权所有2010 Google Inc. 
根据Apache许可证版本2.0获得许可：
 http://www.apache.org/licenses/LICENSE-2.0 
  - > 
 <！ - 从url =（0016）保存http：// localhost  - > 
< html> 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> 
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/> 
< meta http-equiv =X-UA-Compatiblecontent =IE = edge/> 
< title> Google Maps JavaScript API v3示例：优化路线< / title> 
< script type =text / javascriptsrc =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; 
 
函数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（）; 
 
 
函数addMarker（latlng）{
 markers.push（new google.maps.Marker（{
 position：latlng，
 map：map ，
图标：http://maps.google.com/mapfiles/marker+ String.fromCharCode（markers.length + 65）+.png
}））; 
 
 
函数calcRoute（）{
 if（origin == null）{
 alert（点击地图添加一个起点）; 
 return; 
} 
 
 if（destination == null）{
 alert（点击地图添加一个终点）; 
 return; 
} 
 
 var request = {
来源：原产地，
目的地：目的地，
航点：航点，
 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（）; 
 
 
 
函数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;向左飘浮; border：1px solid black;'>< / div> 
< div id ='directionsPanel'style ='width：30％;身高：580（长）;浮动：权利;边境; 1px纯黑;'>< / div> 
< / body> 
< / html> 
  

解决方案

我在3.19指定了google maps版本，已解决。

 < script type =text / javascriptsrc =http://maps.google.com/地图/ API / JS v = 3.19\" >？< /脚本> 
  

我得到了实验版本，因为我没有指定版本。

The attached HTML renders very quickly in Chrome and Mozzilla browsers. If I try to load it in IE11 I get several timeout errors and after 30 seconds the map finally renders.

I have tried all kinds of settings in IE11 with no luck. When I run with developer tools on in debugger mode. I get the error InvalidValueError:not a string in the following function 3 times

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");}}

After hitting F5 to continue three times the MAP finally renders.

Here is the 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>

解决方案

I specified the google maps version at 3.19 and the problem was resolved.

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

I was getting the experimental version because I had no version specified.

这篇关于Google地图花费很长时间才能呈现ie11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！