Javascript 谷歌地图在IE11中不起作用
我知道这是一个重复的问题，但没有一个答案和例子（我到目前为止已经找到）解决了我的问题，所以它要么是一个不同的问题，要么我会被严重否决；-） 编辑 经过大量的测试和挠头之后，我记得这是从一个例子中得到的，我已经找到了它 这是唯一的，在InternetExplorer11中也不起作用 我有一个谷歌地图，可以在Chrome和Firefox中使用，但在IE11中显示一个空白的白色页面 我已经对此进行了研究，并找到了我添加的要点，但我仍然得到了一个空白页 我还尝试过在html和body中添加一个像素值，然后在.map类中添加100%，反之亦然 我使用的代码是： 编辑： 我粘贴到问题中的代码结尾处有一个/缺失。我现在已经添加了这个Javascript 谷歌地图在IE11中不起作用,javascript,google-maps,google-maps-api-3,internet-explorer-11,Javascript,Google Maps,Google Maps Api 3,Internet Explorer 11,我知道这是一个重复的问题，但没有一个答案和例子（我到目前为止已经找到）解决了我的问题，所以它要么是一个不同的问题，要么我会被严重否决；-） 编辑 经过大量的测试和挠头之后，我记得这是从一个例子中得到的，我已经找到了它 这是唯一的，在InternetExplorer11中也不起作用 我有一个谷歌地图，可以在Chrome和Firefox中使用，但在IE11中显示一个空白的白色页面 我已经对此进行了研究，并找到了我添加的要点，但我仍然得到了一个空白页 我还尝试过在html和body中添加一个像素值，然
<!--
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>
我上传了一个例子：只是一些你可能已经做过的基本检查，但当遇到这些奇怪的问题时，你可能永远不应该做。控制台中是否未显示任何错误？您是否尝试过不同的宽度类型（px、%和vh/vw）？您是否尝试过仅使用基本设置初始化地图？它有用吗？您是否尝试过缓慢添加设置，直到其中断？ie 11 devtools报告语法错误。检查控制台，你还没闭上你的头塔吉·托尼。谢谢你。我这边的观点是正确的，但我在这个问题上错过了它，因为我很快从谷歌复制/粘贴了一些示例代码。IE控制台没有显示任何错误。我将投票结束这个问题，因为它太宽泛了。请将您的问题缩小到1个问题，并按照上述建议，尝试一步一步地解决问题。创建一个简单的地图，检查它是否工作，并且没有错误，然后添加内容，直到它中断。一个旁注：我对IE了解不多，您的地图容器确实需要一个高度，但我肯定会在
px%/*
* 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);
});
}
result += String(arguments[i]).replace(/[&<>'"]/g, (char) => {
map.data.setStyle(feature => {