我知道这是一个重复的问题，但没有一个答案和例子（我到目前为止已找到）解决了我的问题，所以它或者是一个不同的问题，或者我会被大量投票; - ）。
修改 经过大量的测试和摸不着头脑后，我记得这是从一个例子中得到的，我找到了它。
这是Google Maps Api Example called Simple Store Locator App，这在Internet Explorer 11中也不起作用。
我有一张适用于Chrome和Firefox的Google地图，但在IE11中显示空白页。
我已经对此进行了研究，all the answers我发现我已添加IE11 needing a width:100% and height:100% on all the containers，但我仍然会看到空白页。
我还尝试将一个像素值添加到html和body然后100％添加到.map类，反之亦然。
我使用的代码是：
修改 我粘贴到问题中的代码缺少/关闭头。我现在已经添加了这个。
<!--
Copyright 2017 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<title>Team area & Incident map</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
.map {
height: 100%;
width:100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
width:100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="map"></div>
<script src="app.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>
</body>
</html>
并且app.js包含：
/*
* Copyright 2017 Google Inc. All rights reserved.
*
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language governing
* permissions and limitations under the License.
*/
// Style credit: https://snazzymaps.com/style/1/pale-dawn
const mapStyle = [
{
"featureType": "administrative",
"elementType": "all",
"stylers": [
{
"visibility": "on"
},
{
"lightness": 33
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2e5d4"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#c5dac6"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
},
{
"lightness": 20
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"lightness": 20
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#c5c6c6"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#e4d7c6"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#fbfaf7"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"visibility": "on"
},
{
"color": "#acbcc9"
}
]
}
];
// Escapes HTML characters in a template literal string, to prevent XSS.
// See https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#RULE_.231_-_HTML_Escape_Before_Inserting_Untrusted_Data_into_HTML_Element_Content
function sanitizeHTML(strings) {
const entities = {'&': '&', '<': '<', '>': '>', '"': '"', "'": '''};
let result = strings[0];
for (let i = 1; i < arguments.length; i++) {
result += String(arguments[i]).replace(/[&<>'"]/g, (char) => {
return entities[char];
});
result += strings[i];
}
return result;
}
function initMap() {
// Create the map.
const map = new google.maps.Map(document.getElementsByClassName('map')[0], {
zoom: 9,
center: {lat: 55.588290, lng: -3.258820},
styles: mapStyle
});
var triangleCoords = [
{lat: 55.354355, lng: -2.477846},
{lat: 55.355146, lng: -2.479756},
{lat: 55.355731, lng: -2.482717},
{lat: 55.355668, lng: -2.483640},
{lat: 55.356156, lng: -2.488189},
{lat: 55.358302, lng: -2.491450},
{lat: 55.361415, lng: -2.495334},
{lat: 55.362025, lng: -2.497995},
{lat: 55.362927, lng: -2.497609},
{lat: 55.363537, lng: -2.494390},
{lat: 55.364171, lng: -2.494648},
{lat: 55.364464, lng: -2.496364},
{lat: 55.364781, lng: -2.496665},
{lat: 55.365854, lng: -2.495806},
{lat: 55.367279, lng: -2.492480},
{lat: 55.372498, lng: -2.490592},
{lat: 55.379764, lng: -2.496085},
{lat: 55.383373, lng: -2.496600},
{lat: 55.386444, lng: -2.495828},
{lat: 55.392684, lng: -2.499003},
{lat: 55.403564, lng: -2.502651},
{lat: 55.416038, lng: -2.509174},
{lat: 55.419741, lng: -2.513638},
{lat: 55.458930, lng: -2.553635},
{lat: 55.500955, lng: -2.545395},
{lat: 55.505621, lng: -2.574234},
{lat: 55.576331, lng: -2.663498},
{lat: 55.704217, lng: -2.714310},
{lat: 55.733611, lng: -2.767868},
{lat: 55.775342, lng: -2.792587},
{lat: 55.824744, lng: -2.859879},
{lat: 55.909507, lng: -3.064499},
{lat: 55.924742, lng: -3.061409},
{lat: 55.944358, lng: -3.071709},
{lat: 55.988552, lng: -3.176765},
{lat: 55.985095, lng: -3.328514},
//{lat: , lng: },
//Section from A68 South West to
{lat: 55.125042, lng: -2.829666},
{lat: 55.170559, lng: -2.696457},
{lat: 55.220725, lng: -2.670364},
{lat: 55.224642, lng: -2.634659},
{lat: 55.243980, lng: -2.631054},
{lat: 55.245937, lng: -2.611485},
{lat: 55.259244, lng: -2.646160},
{lat: 55.261787, lng: -2.627621},
{lat: 55.284083, lng: -2.606678},
{lat: 55.311252, lng: -2.558270},
{lat: 55.322192, lng: -2.519817},
];
// Construct the polygon.
var tweedvalleymrtarea = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF6699',
fillOpacity: 0.35
});
tweedvalleymrtarea.setMap(map);
// Load the Incident GeoJSON file into the map.
map.data.loadGeoJson('incidents.json');
// Define the custom incident marker icons, using the incident category.
// bike
// misper
// walker
map.data.setStyle(feature => {
return {
icon: {
url: `img/icon_${feature.getProperty('category')}.png`,
scaledSize: new google.maps.Size(64, 64)
}
};
});
const apiKey = 'your_api_key';
const infoWindow = new google.maps.InfoWindow();
infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -30)});
// Show the information for a store when its marker is clicked.
map.data.addListener('click', event => {
const team = event.feature.getProperty('team');
const year = event.feature.getProperty('year');
const grid = event.feature.getProperty('grid');
const day = event.feature.getProperty('day');
const date = event.feature.getProperty('date');
const category = event.feature.getProperty('category');
const type = event.feature.getProperty('type');
const area = event.feature.getProperty('area');
const sex = event.feature.getProperty('sex');
const age = event.feature.getProperty('age');
const members = event.feature.getProperty('members');
const hours = event.feature.getProperty('hours');
const description = event.feature.getProperty('description');
const phone = event.feature.getProperty('phone');
const position = event.feature.getGeometry().get();
const content = sanitizeHTML`
<img style="float:left; width:120px; margin-top:20px 0 0 20px;" src="img/logo_${category}.png">
<div class="incident-container" style="margin-left:150px; margin-bottom:20px;">
<div class="title">${type}</div>
<strong>Sex: </strong>${sex}<br>
<strong>Age: </strong>${age}<br>
<strong>Grid Reference: </strong>${grid}<br>
<strong>Date: </strong>${day} ${date}<br>
<strong>Location: </strong>${area}<br>
<strong>Team: </strong>${team}<br>
<strong>Year: </strong>${year}<br>
<strong>Members : </strong>${members}<br>
<strong>Hours: </strong>${hours}<br>
<p>${description}</p>
</p>
</div>
`;
infoWindow.setContent(content);
infoWindow.setPosition(position);
infoWindow.open(map);
});
}
修改 IE11控制台给了我两个错误： 1）app.js行上的语法错误（116,64） 2）js InvalidValueError：initMap不是函数（100,96）
1）app.js的第116行是sanitize函数的一部分，行是：
result += String(arguments[i]).replace(/[&<>'"]/g, (char) => {
如果我注释掉该函数，那么它就会在这一行上给出一个语法错误：
map.data.setStyle(feature => {
这条线现在如何在它之前没有给我一个语法错误？它所做的只是设置地图样式？
我上传了一个示例：http://digitalessence.net/map/