Question

我试图在IE11中执行JavaScript，我正在使用OpenStreetMap Leaflet Libraries。我的问题是我可以在IE11中看到MAP，但是当我在其他平台（例如Ex-C＃、. net）中使用此HTMLfile链接来调用浏览器并显示地图时，却没有显示地图，并且在“ https://unpkg.com/leaflet@1.3.1/dist/leaflet.js”中显示一些脚本错误，而不显示行号或错误号。

下面是我的示例代码

<!DOCTYPE html>
<html>
<head>
	<title>OpenStreet Map Example</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" /> -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
</head>
<body style='margin:0'>
	<div id="map" style="width: 100vw; height: 100vh"></div>
	<script src="//cdn.jsdelivr.net/bluebird/3.5.0/bluebird.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
	
	<script type="text/javascript"  src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
	<script type="text/javascript"  src="https://unpkg.com/leaflet.vectorgrid@1.2.0"></script>
	
	
	

	<!-- <script type="text/javascript" src="../dist/Leaflet.VectorGrid.bundled.js"></script> -->
	
	
	<script>
	var Promise;
		var map = L.map('map');
// 		var cartodbAttribution = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
//
// 		var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
// 			attribution: cartodbAttribution,
// 			opacity: 0.5
// 		}).addTo(map);
// 		var mapboxUrl = 'https://{s}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiaXZhbnNhbmNoZXoiLCJhIjoiY2l6ZTJmd3FnMDA0dzMzbzFtaW10cXh2MSJ9.VsWCS9-EAX4_4W1K-nXnsA';
//		var mapboxAttribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://www.mapbox.com/about/maps/">MapBox</a>'
		var openmaptilesUrl = "https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}";
		var openmaptilesAttribution = '<a href="https://openmaptiles.org/">&copy; OpenMapTiles</a>, <a href="http://www.openstreetmap.org/copyright">&copy; OpenStreetMap</a> contributors';
		var openmaptilesKey = 'UmmATPUongHdDmIicgs7';
		var vectorTileOptions = {
			rendererFactory: L.canvas.tile,
			attribution: openmaptilesAttribution,
			key: openmaptilesKey,
			subdomains: '0123',	// 01234 for openmaptiles, abcd for mapbox
			maxNativeZoom: 14,
			vectorTileLayerStyles: {
				'poi': function(properties, zoom) {
					return {
						weight: 2,
						color: 'gray',
						opacity: 1,
						fillColor: 'gray',
						fill: true,
						radius: 6,
						fillOpacity: 0.7
					}
				},
				'housenumber': function(properties, zoom) {
					return {
						weight: 2,
						color: 'purple',
						opacity: 1,
						fillColor: 'green',
						fill: true,
						radius: 4,
						fillOpacity: 0.3
					}
				},
				park: [],
				place: [],
				water: [],
				waterway: [],
				boundary: [],
				country_label: [],
				marine_label: [],
				state_label: [],
				place_label: [],
				waterway_label: [],
				water_name: [],
				landcover: [],
				landuse: [],
				landuse_overlay: [],
				road: [],
				transportation: [],
				waterway: [],
				aeroway: [],
				tunnel: [],
				bridge: [],
				barrier_line: [],
				building: [],
				road_label: [],
				road_name: [],
				transportation_name: [],
				housenum_label: [],
				mountain_peak: []  //,
			},
			interactive: true,	// Make sure that this VectorGrid fires mouse/pointer events
			getFeatureId: function(f) {
				return f.properties.osm_id;
			}
		};
		L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
		var highlight;
		var clearHighlight = function() {
			if (highlight) {
				pbfLayer.resetFeatureStyle(highlight);
			}
			highlight = null;
		};
		var pbfLayer = L.vectorGrid.protobuf(openmaptilesUrl, vectorTileOptions)
			.on('click', function(e) {	// The .on method attaches an event handler
				L.popup()
					.setContent(e.layer.properties.name || e.layer.properties.type)
// 					.setContent(JSON.stringify(e.layer))
					.setLatLng(e.latlng)
					.openOn(map);
				clearHighlight();
				highlight = e.layer.properties.osm_id;
				pbfLayer.setFeatureStyle(highlight, {
					weight: 2,
					color: 'red',
					opacity: 1,
					fillColor: 'red',
					fill: true,
					radius: 6,
					fillOpacity: 1
				})
				L.DomEvent.stop(e);
			})
			.addTo(map);
		map.on('click', clearHighlight);
		map.setView([12.9667, 77.5667], 10);
	</script>
</body>
</html>

OpenStreet Map和Leaflet JS库，在IE11中显示地图时出现问题

0 个答案: