Question

我正在使用mapbox和leaflet来控制地图功能，并希望显示放大/缩小控件，但在添加后也无法正常工作。可能是什么问题。我改变了一些CSS，但对我没有用。我不知道问题出在哪里。谁可以帮助我之前做过这件事的人？

HTML

<div class="main-wrapper">
        <div class="main">
            <div class="main-inner">

                <div class="content">
                    <div class="row map-filter-nav">
                        <div class="filter filter-gray push-bottom">

                        </div><!-- /.filter -->
                    </div>
                    <div class="container-fluid fullwidth-wrapper map-and-property-holder">
                        <div class="row">
                            <div class="col-lg-4 col-md-6 mapProperty-holder">

                            </div><!-- /.col-* -->

                            <div class="col-lg-8 col-md-6 map-holder">
                                <div id="map-leaflet" class="full"></div>
                            </div>


                        </div><!-- /.row -->
                    </div><!-- /.container -->
                </div><!-- /.content -->
            </div><!-- /.main-inner -->
        </div><!-- /.main -->
    </div><!-- /.main-wrapper -->

JS

if ($('#map-leaflet').length) {
        var map = L.map('map-leaflet', {
            zoom: 5,
            maxZoom: 20,
            center: [36.123452,-119.3387975],
            zoomControl: false
        }); 

        var access_token = 'pk.eyJ1IjoiYXZlbmdlcnMyOCIsImEiOiJjajlhNXMwYmgxOW1iMndxcWsyM3N3ZnBkIn0.zGOootjXB64isTkthoa2xQ';
        var marker_cluster = L.markerClusterGroup();        

        //map.scrollWheelZoom.disable();


        L.control.zoom({
            position:'topright'
        }).addTo(map);


        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + access_token, {              
            id: 'mapbox.streets',
            attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
        }).addTo(map);




        $.each(db_markers, function(index, value) {
            var icon = L.divIcon({
                html: value.icon,
                iconSize:     [36, 36],
                iconAnchor:   [36, 36],
                popupAnchor:  [-20, -42]
            });

            var marker = L.marker(value.center, {
                icon: icon
            }).addTo(map);      

            marker.bindPopup(
                '<div class="listing-window-image-wrapper">' +
                    '<a href="properties-detail-standard.html">' +
                        '<div class="listing-window-image" style="background-image: url(' + value.image + ');"></div>' +
                        '<div class="listing-window-content">' +
                            '<div class="info">' +
                                '<h2>' + value.title + '</h2>' +
                                '<h3>' + value.price + '</h3>' +
                            '</div>' +
                        '</div>' +
                    '</a>' +
                '</div>'
            );

            marker_cluster.addLayer(marker);
        });

        map.addLayer(marker_cluster);


    }

leaflet.css

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {

    font: bold 18px 'Lucida Console', Monaco, monospace;
    text-indent: 1px;
    }
.leaflet-control-zoom-out {
    font-size: 20px;
    }

.leaflet-touch .leaflet-control-zoom-in {
    font-size: 22px;
    }
.leaflet-touch .leaflet-control-zoom-out {
    font-size: 24px;
    }

Answer 1

minimal example在宣传单1.2.0中没有问题：

＆＃13;

var map = L.map('map-leaflet', {
  zoom: 5,
  maxZoom: 20,
  center: [36.123452, -119.3387975],
  zoomControl: false
});

L.control.zoom({
  position: 'topright'
}).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

＆＃13;

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font: bold 18px 'Lucida Console', Monaco, monospace;
  text-indent: 1px;
}

.leaflet-control-zoom-out {
  font-size: 20px;
}

.leaflet-touch .leaflet-control-zoom-in {
  font-size: 22px;
}

.leaflet-touch .leaflet-control-zoom-out {
  font-size: 24px;
}

#map-leaflet {
  height: 200px;
}

＆＃13;

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

<div id="map-leaflet"></div>

＆＃13;

根据代码中的要求，缩放控件正确显示在右上角。

添加后为什么还没有缩放控制显示？

1 个答案: