所附的HTML渲染速度非常快于Chrome和Mozzilla浏览器。 如果我尝试加载它在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<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>
