Question

我试图在地图集地图上禁用滚动缩放，但它无法正常工作。任何人都可以让我知道我的代码有什么问题吗？我得到的错误是＆＃34; Uncaught TypeError：无法读取属性＆＃39;禁用＆＃39;未定义＆＃34;

<script>
    L.mapbox.accessToken = 'pk.token';
    var map = L.mapbox.map('map', 'mapbox.streets', {
        legendControl: {
            position: 'topright'
        }
    })
        .setView([56.3, 11.5], 7);

      var popup = new L.Popup({ autoPan: false });

      // statesData comes from the 'us-states.js' script included above
      var statesLayer = L.geoJson(statesData,  {
          style: getStyle,
          onEachFeature: onEachFeature
      }).addTo(map);

      function getStyle(feature) {
          return {
              weight: 2,
              opacity: 0.1,
              color: 'black',
              fillOpacity: 0.7,
              fillColor: getColor(feature.properties.density)
          };
      }

      // get color depending on population density value
      function getColor(d) {
          return d > 1000 ? '#512b00' :
              d > 500 ? '#8E4C01' :
              d > 200  ? '#cc4c02' :
              d > 100  ? '#ec7014' :
              d > 50   ? '#fe9929' :
              d > 20   ? '#fec44f' :
              d > 10   ? '#fee391' :
              d > 5    ? '#fff7bc' :
              '#ffffe5';
      }

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

      var closeTooltip;

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

          popup.setLatLng(e.latlng);
          popup.setContent('<div class="marker-title">' + layer.feature.properties.name + '</div>' +
              layer.feature.properties.density + ' feriehuse');

          if (!popup._map) popup.openOn(map);
          window.clearTimeout(closeTooltip);

          // highlight feature
          layer.setStyle({
              weight: 3,
              opacity: 0.3,
              fillOpacity: 0.9
          });

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

      function mouseout(e) {
          statesLayer.resetStyle(e.target);
          closeTooltip = window.setTimeout(function() {
              map.closePopup();
          }, 100);
      }

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

      map.legendControl.addLegend(getLegendHTML());

      function getLegendHTML() {
        var grades = [0, 5, 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(
            '<li><span class="swatch" style="background:' + getColor(from + 1) + '"></span> ' +
            from + (to ? '&ndash;' + to : '+')) + '</li>';
        }

        return '<span>Antal feriehuse</span><ul>' + labels.join('') + '</ul>';
      }

      // disable map zoom when using scroll
      map.scrollZoom.disable();
    </script>

Answer 1

这是一个mapbox.js / leaflet地图，而不是mapbox-gl-js，所以区别在于Leaflet，滚动缩放控件被称为scrollWheelZoom而不是scrollZoom。如果用以下代码替换脚本的最后一行，它应该可以工作。 http://jsfiddle.net/x5j669zj/

if (map.scrollWheelZoom) {
  map.scrollWheelZoom.disable();
}

禁用地图框上的滚动缩放

1 个答案: