У меня есть веб-сайт, который использует Google Map API и накладывает линии участков, предоставленные службой ESRI.В Google и Firefox элементы управления масштабированием карты отображаются очень хорошо.
Карта в Chrome
Подсветка происходит на плитке ESRI.
В IE11 элементы управления масштабированием исчезли, и карта является статической (невозможно увеличить или переместить ее).
Карта в IE 11
Как видно, масштабированиеэлементы управления отсутствуют, и линии на плитке (желтые линии) не совпадают с базовой картой.Это потому, что тайл увеличен, а карта - нет.Была такая проблема, о которой сообщалось еще в 2014 году, но она была устранена в версии 3.16.
Вот мой код, который строит карту:
///summary
///sets up the map
///Parameters
///-mapDivID string id for the div to place the map
///-coords object with lat and lng properties
///-zoom default zoom of map (I use 13)
///-directions optional object to display directions
function startmap(mapDivID, coords, zoom, directions) {
var maps = new Array();
var bounds = new Array();
var directionsDisplay;
var directionsService;
// Get the div to put the map in and check to make sure it's there.
var mapDiv = document.getElementById(mapDivID);
if (mapDiv) {
var options = {
zoom: zoom,
center: coords,
zoomControl: true,
zoomControlOptions: {
postion: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
// we have multiple maps so we need to store them in an array by the divID so we don't overlap one or the other.
var map = {};
if (maps.indexOf(mapDivID) < 0) {
maps[mapDivID] = new google.maps.Map(mapDiv, options);
if (directions) {
directionsDisplay = new google.maps.DirectionsRenderer;
directionsService = new google.maps.DirectionsService;
directionsDisplay.setMap(maps[mapDivID]);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var onChangeHandler = function (e) {
if (e.which && e.which == 13) {
calculateAndDisplayRoute();
}
};
document.getElementById('txtOrigin').addEventListener('keypress', onChangeHandler);
}
}
map = maps[mapDivID];
if (bounds.indexOf(mapDivID) < 0) {
bounds[mapDivID] = new google.maps.LatLngBounds();
}
return map;
} else {
// No map div
console.error(mapDivID + ' not found');
}
return map;
}
startmap('map', {lat: -34.397, lng: 150.644}, 13, null);
#map { width: 100%; height: 100% }
<script src="http://maps.google.com/maps/api/js?libraries=drawing"></script>
<div id="map">map goes here</div>