0
저는 Leaflet.JS 및 CartoDB.JS API를 사용하여 작성된지도가 있습니다. 지도는 Google 크롬과 Safari에서 아름답게 작동하지만 핀은 IE에 표시되지 않으며 FireFox에서는 핀이 나타나지만 클릭 할 수는 없습니다. http://booktravelbound.net/experienceamerica/Leaftlet.JS/CartoDB.JS API 맵이 IE 또는 Firefox에서 작동하지 않습니다.
내가 전문 개발자가 아닌, 그리고 난이 일이 계약자에 의해 수행했다 : 여기
는 URL입니다. 누군가 도울 수 있습니까? 스택 오버플로에 처음으로, 그래서 용서해주세요!var InteractiveMap = L.Class.extend({
options: {
'redIcon' : L.icon({
iconUrl: 'img/leaflet-color-markers/marker-icon-red.png',
iconRetinaUrl: 'img/leaflet-color-markers/marker-2x-red.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
//shadowUrl: 'my-icon-shadow.png',
//shadowRetinaUrl: '[email protected]',
//shadowAnchor: [22, 94]
}),
'greyIcon' : L.icon({
iconUrl: 'img/leaflet-color-markers/marker-icon-grey.png',
iconRetinaUrl: 'img/leaflet-color-markers/marker-icon-2x-grey.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
//shadowUrl: 'my-icon-shadow.png',
//shadowRetinaUrl: '[email protected]',
//shadowAnchor: [22, 94]
})
},
initialize: function(options) {
L.setOptions(this, options);
if (null != this.options.cartoDbOptions) {
this.initMapAsCartoDbViz();
} else {
this.initMapInUsualWay();
}
},
initMapInUsualWay: function() {
this._map = L.map(this.options.mapDivId, this.options.mapOptions);
this.initBaseMapLayers();
L.control.scale({ position : 'bottomright' }).addTo(this._map);
this.completeInit();
},
initMapAsCartoDbViz: function() {
var _interactiveMap = this;
cartodb.createVis(this.options.mapDivId, this.options.cartoDbOptions.vizURL,
L.extend({
center_lat: this.options.mapOptions.center.lat,
center_lon: this.options.mapOptions.center.lng,
zoom: this.options.mapOptions.zoom
}, this.options.cartoDbOptions.vizOptions)
)
.done(function (vis, layers) {
// layer 0 is the base layer, layer 1 is cartodb layer
// setInteraction is disabled by default
_interactiveMap._map = vis.getNativeMap();
_interactiveMap.completeInit();
})
.error(function (err) {
console.log(err);
_interactiveMap.initMapInUsualWay();
});
},
initBaseMapLayers: function() {
var baseMapLayerDescription = [
{ 'id' :"Carto", 'name' : 'Carto', 'default' : 'true',
init : function() {
var layer = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
maxZoom: 18, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, ©<a href="https://carto.com/attribution">CARTO</a>'
});
return layer;
}
}
];
this._baseMaps = {};
for (i=0, arrLen = baseMapLayerDescription.length; i < arrLen; i++) {
var tileLayer = baseMapLayerDescription[i].init();
this._baseMaps[baseMapLayerDescription[i].name] = tileLayer;
if (baseMapLayerDescription[i].default) {
tileLayer.addTo(this._map);
}
}
},
completeInit: function() {
this.initCustomControlsOnMap();
this._getJSON(this.options.dataUrl, this.addJsonToMap, this);
this.initSideBar();
},
initCustomControlsOnMap: function() {
//controlLayers = L.control.layers(this._baseMaps, this._overlayLayers);
//controlLayers.addTo(this._map);
},
initSideBar: function() {
this._sideMenuTemplate = document.getElementById('sideMenuTemplate').innerText;
Mustache.parse(this._sideMenuTemplate);
this._sidebar = L.control.sidebar('sidebar', {
closeButton: true,
position: 'right'
});
this._map.addControl(this._sidebar);
},
addJsonToMap: function(data) {
var lineLatLngs = [];
for (var i = 0, arrLenght = data.length; i < arrLenght; i++) {
var city = data[i],
location = city.location.split(','),
marker;
if (city.active) {
marker = L.marker(location, { icon : this.options.redIcon });
lineLatLngs.push(marker.getLatLng());
marker.cityDetails = city;
marker.cityDetails.showHotels = !(null == city.hotels);
marker.cityDetails.showTours = !(null == city.tours);
marker.on('click', function() {
//interactiveMap._sidebar.setContent('');
interactiveMap._sidebar.getContainer().scrollTop = 0;
var sideMenuContext = Mustache.render(interactiveMap._sideMenuTemplate, this.cityDetails);
interactiveMap._sidebar.setContent(sideMenuContext);
interactiveMap._sidebar.show();
});
} else {
if ('0' === L.version.substr(0, 1)) { // v.0.7.x doesn't implemented marker.bindTooltip
marker = L.marker(location, {
icon : this.options.greyIcon,
title : 'We haven\'t visited this city yet! Check back next week for new cities.'
});
} else {
marker = L.marker(location, { icon : this.options.greyIcon });
marker.bindTooltip('We haven\'t visited this city yet!<br/>Check back next week for new cities.');
}
marker.on('click', function() {
interactiveMap._sidebar.hide();
});
}
marker.addTo(this._map);
}
L.polyline(lineLatLngs, {dashArray: "5, 5"}).addTo(this._map);
},
_getJSON: function(url, callback, callbackContext) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
//xhr.responseType = 'json';
//xhr.setRequestHeader('Accept', 'application/json');
xhr.onload = function() {
if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status <= 304 && xhr.response) {
//callback.call(callbackContext, xhr.response);
callback.call(callbackContext, JSON.parse(xhr.response));
} else {
console.log('getJSON error', xhr);
}
};
xhr.send();
}
});
var interactiveMap = new InteractiveMap({
mapDivId : 'map',
mapOptions : {
center: L.latLng(37.19533058280065, -98.87695312500001),
zoom: 4,
zoomControl : false,
dragging : false,
doubleClickZoom : false,
scrollWheelZoom : false
},
cartoDbOptions : {
vizURL : 'http://telegul.carto.com/api/v2/viz/b167e126-38e5-11e7-ba84-0e3ebc282e83/viz.json', // <-- INSERT {YOUR vizjson_url}
vizOptions : {
shareable: false,
title: false,
description: false,
search: false,
zoomControl: false,
cartodb_logo : false,
tiles_loader: true,
infowindow: false,
layer_selector: false,
scrollwheel: false,
layer_selector: false,
legends: false
}
},
dataUrl : 'data/ExperienceDomesticMap.json'
});
감사합니다 :
여기에 자바 스크립트 코드입니다!
작품 잘 .... 인터넷 옵션의 고급 탭 ...에 멀티미디어 설정을 확인, 문제 해결 웹 브라우저 문제의 첫 번째 단계 noAddons 모드에서 테스트하는 것입니다. 웹 페이지에도 마크 업 오류가 있습니다. dev에 콘솔 메시지를 기록하도록 IE를 설정하십시오. 인터넷 옵션> 고급 탭에서 "항상 개발자 콘솔 메시지 기록"을 선택하십시오. 변경 사항을 저장하다. –
고마워요 @RobParsons! 유용한 팁. 실제로 버그를 발견하고 문제를 해결했습니다. 이제 IE가 콘텐츠를 올바르게 표시하지 않는 또 다른 문제에 직면하고 있습니다. –
@CarmenCedeno 문제를 발견 한 경우 해결 된 것으로 표시해주세요. –