Question

我遇到的问题似乎只出现在IE11中。我已经使用Browserstack来测试这个问题。

无论是在桌面模式还是全屏模式下，我的联系页面上的Google地图都不会显示。我在控制台中看不到任何问题，并且它在以前版本的IE中加载得很好。联系页面：http://ryanfitton.co.uk/contact/

我还提出了一个非常简单的演示，它使用相同的代码：http://ryanfitton.com。

HTML：

<html>
    <style type="text/css">
        #map {
            padding:0!important; /*Remove Jumbotron padding. Added important for IE8*/
        }

        #map-canvas {
            height:500px;
            position:relative;
            z-index:1;
        }
    </style>

    <body>
        <div id="map">
            <div id="map-canvas"></div>
        </div>
    </body>

    <script src="maps.js"></script>
</html>

Maps JS：

function initialize() {
  //Map Custom Styles
  var styles = [
    //Start to display all features
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { saturation: -25 }, { visibility: "on" }
      ]
    },
    //Turn off individual features
    //Turn off Points of Interest (POI). E.g. Other businesses
    {
      featureType: "poi",
      stylers: [
        { visibility: "off" }
      ]
    },
    //Turn off Transit. E.g. Train stations and Bus stops
    {
      featureType: "transit",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  //Map Styled options
  var styledMapOptions = {
    name: "Greyscale"
  };

  //Set to a variable
  var mapType = new google.maps.StyledMapType(styles, styledMapOptions);

  //Set Map options
  var mapOptions = {
    zoom: 10,                                               //Default Zoom level
    center:new google.maps.LatLng(53.6837636,-1.8310225),   //The default center of the map
    disableDefaultUI: true,                                 //Show default UI? True or False
    streetViewControl: false,                               //Show streetview controls? True or False
    scrollwheel: false,                                     //Allow scrolling of map with mouse scroll wheel? True or False
    draggable: false,                                       //Allow map to be draggable? True or False

    panControl: true,                                       //Show Pan controls? True of False
    panControlOptions: {                                    //Pan contol options
      position: google.maps.ControlPosition.RIGHT_CENTER
    },

    zoomControl: true,                                      //Allow zoom controls - Especially on mobile? True or False
    disableDoubleClickZoom: true,                           //Disable Double click zoom
    zoomControlOptions: {                                   //Zoom control options
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.RIGHT_CENTER
    },

    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'Greyscale']
    },

    mapTypeId: 'Greyscale'
  };

  //Load map and insert into #map-canvas
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  //Set Map Type
  map.mapTypes.set('Greyscale', mapType);

  //Map Marker Options
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(53.6844873,-1.5032883), //Comment out line to not display an icon
    map: map,
    title:"Ryan Fitton"
  });

  //Force Map Data to stay in center when resizing window
  google.maps.event.addDomListener(window, 'resize', initialize);
  google.maps.event.addDomListener(window, 'load', initialize);
}


function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

jsfiddle

Answer 1

您的代码似乎在Internet Explorer 11中正常运行。小提琴也无法在Chrome中运行，这表明问题不是针对特定浏览器，而是使用小提琴配置，代码本身或图书馆（非常不可能）。

您的代码设置为根据jsfiddle配置执行onLoad。但问题是，当您的代码被执行时，它所做的就是将处理程序绑定到onload事件，此时已经已经发生了。只需更改jsfiddle配置以在＆lt; head＆gt; 中解包运行，问题就解决了。

http://jsfiddle.net/jonathansampson/o2za2Lu0/8/

网站本身对我来说似乎是 as-is ，无需任何进一步的工作：

Google Maps API不会在IE11中显示地图图块

1 个答案: