2017-05-16 6 views
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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;<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' 
}); 

감사합니다 :

여기에 자바 스크립트 코드입니다!

+0

작품 잘 .... 인터넷 옵션의 고급 탭 ...에 멀티미디어 설정을 확인, 문제 해결 웹 브라우저 문제의 첫 번째 단계 noAddons 모드에서 테스트하는 것입니다. 웹 페이지에도 마크 업 오류가 있습니다. dev에 콘솔 메시지를 기록하도록 IE를 설정하십시오. 인터넷 옵션> 고급 탭에서 "항상 개발자 콘솔 메시지 기록"을 선택하십시오. 변경 사항을 저장하다. –

+0

고마워요 @RobParsons! 유용한 팁. 실제로 버그를 발견하고 문제를 해결했습니다. 이제 IE가 콘텐츠를 올바르게 표시하지 않는 또 다른 문제에 직면하고 있습니다. –

+0

@CarmenCedeno 문제를 발견 한 경우 해결 된 것으로 표시해주세요. –

답변

0

추가 IE

에 사이드 바 볼 수있게하는 메타 태그
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
나를 위해