2013-06-26 4 views
-2

이 코드는 jshint.com에서 테스트했습니다. ie8과 jshint에서는 L이 정의되지 않는다고 불평합니다. 왜 L은 정의되지 않았는가? 그리고 어떻게 정의 하는가? ie8이이 코드에서 작동 할까?L is undefined ie8

여기에서이 예의 코드를 찾을 수 있습니다. http://leafletjs.com/examples/choropleth.html

var map = L.map('map').setView([37.8, -96], 4); 

    var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', { 
     attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade', 
     key: 'BC9A493B41014CAABB98F0471D759707', 
     styleId: 22677 
    }).addTo(map); 


    // control that shows state info on hover 
    var info = L.control(); 

    info.onAdd = function (map) { 
     this._div = L.DomUtil.create('div', 'info'); 
     this.update(); 
     return this._div; 
    }; 

    info.update = function (props) { 
     this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? 
      '<b>' + props.name + '</b><br />' + props.density + ' people/mi<sup>2</sup>' 
      : 'Hover over a state'); 
    }; 

    info.addTo(map); 


    // get color depending on population density value 
    function getColor(d) { 
     return d > 1000 ? '#800026' : 
       d > 500 ? '#BD0026' : 
       d > 200 ? '#E31A1C' : 
       d > 100 ? '#FC4E2A' : 
       d > 50 ? '#FD8D3C' : 
       d > 20 ? '#FEB24C' : 
       d > 10 ? '#FED976' : 
          '#FFEDA0'; 
    } 

    function style(feature) { 
     return { 
      weight: 2, 
      opacity: 1, 
      color: 'white', 
      dashArray: '3', 
      fillOpacity: 0.7, 
      fillColor: getColor(feature.properties.density) 
     }; 
    } 

    function highlightFeature(e) { 
     var layer = e.target; 

     layer.setStyle({ 
      weight: 5, 
      color: '#666', 
      dashArray: '', 
      fillOpacity: 0.7 
     }); 

     if (!L.Browser.ie && !L.Browser.opera) { 
      layer.bringToFront(); 
     } 

     info.update(layer.feature.properties); 
    } 

    var geojson; 

    function resetHighlight(e) { 
     geojson.resetStyle(e.target); 
     info.update(); 
    } 

    function zoomToFeature(e) { 
     map.fitBounds(e.target.getBounds()); 
    } 

    function onEachFeature(feature, layer) { 
     layer.on({ 
      mouseover: highlightFeature, 
      mouseout: resetHighlight, 
      click: zoomToFeature 
     }); 
    } 

    geojson = L.geoJson(statesData, { 
     style: style, 
     onEachFeature: onEachFeature 
    }).addTo(map); 

    map.attributionControl.addAttribution('Population data &#169; <a href="http://census.gov/">US Census Bureau</a>'); 


    var legend = L.control({position: 'bottomright'}); 

    legend.onAdd = function (map) { 

     var div = L.DomUtil.create('div', 'info legend'), 
      grades = [0, 10, 20, 50, 100, 200, 500, 1000], 
      labels = [], 
      from, to; 

     for (var i = 0; i < grades.length; i++) { 
      from = grades[i]; 
      to = grades[i + 1]; 

      labels.push(
       '<i style="background:' + getColor(from + 1) + '"></i> ' + 
       from + (to ? '&#8211;' + to : '+')); 
     } 

     div.innerHTML = labels.join('<br />'); 
     return div; 
    }; 

    legend.addTo(map); 
+0

:

헤더의 상단에 넣어 IE8 문제를 해결하려면? –

+0

@CrazyTrain 네, 파이어 폭스에서 작동합니다. 더 많은 질문을 읽어 주셔서 감사합니다. – user1015711

+0

그러면 라이브러리를로드하는 데 문제가있는 것 같습니다. 'doctype' 세트를 가지고 있고, 당신이 호환성 모드가 아니라고 체크 했습니까? –

답변

3

코드는 정상입니다. JShint는 전단이 들어있는 js 파일에서 L이 선언 될 때 L이 정의되지 않는다고 말합니다. 특별히`점 찍어 IE8`, 우리는 그것을 다른 브라우저에서 작동 가정해야하기 때문에

<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
2

L는 정의이다. 아무데도 정의하지 않습니다. 이것이 "정의되지 않은"의미입니다. 오류를 표시하지 않으려면 L이 정의 된 기호임을 linter에게 알려야합니다. 그렇지 않으면 오류를 무시하십시오.

+3

JSHint의 경우 코드 상단에'/ * global L * /'을 추가 할 수 있습니다. –

+0

@ 메이가 그 다음 어떻게 정의합니까? – user1015711

+0

그냥 정의하십시오 :'var L;' – meagar