Question

我实际上想要在地图的右上角显示放大/缩小控制。我试图在传单上添加缩放控制，但它不起作用。我已禁用默认的zoop控件并在代码中手动添加，但仍然没有在地图上显示。我正在使用传单和mapbox。这是截图和代码。 js包含mapbox和google地图

的代码

JS

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

        var access_token = 'XXXXX.XXXXX.XX';
        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, {      
            scrollWheelZoom: false,     
            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);


    }

    /**
     * Google Map
     */
    if ($('#map-google').length) {

        var markers = [];
        var infos = [];

        $.each(db_markers, function(index, value) {
            var content = '<div id="' + value.id + '" class="map-popup-content-wrapper"><div class="map-popup-content"><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></div><i class="fa fa-close close"></i></div>' +
                '<div class="map-marker">' + value.icon + '</div>';

            markers.push({
                latLng: value.center, 
                data: value.id,         
                options: {                                  
                    content: content,
                    offset: {
                        x: -18,
                        y: -42
                    }                           
                }
            });
        });

        $('#map-google').gmap3({        
            map: {                                  
                options:{
                    styles: [{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]},{"featureType":"road.highway","elementType":"all","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]}],
                    center:[40.761077, -73.88],
                    scrollwheel: false,
                    zoom: 12,
                    maxZoom: 20
                }
            },
            marker: {
                cluster: {
                    radius: 100,
                }
            },
            overlay: {
                values: markers,
                events: {
                    click: function(marker, event, context) {                                                           
                        $('.map-popup-content-wrapper').css('display', 'none');

                        if ($(event[0].target).hasClass('close')) {
                            $('#' + context.data).css('display', 'none');
                        } else {
                            $('#' + context.data).css('display', 'block');
                        }
                    }
                }
            }
        });                 


    }

HTML 的

<div class="col-lg-8 col-md-6 map-holder">
    <div id="map-leaflet" class="full"></div>
        <!--Please insert your map here.-->

</div>

Answer 1

使用默认缩放控件的解决方案是在父元素中添加属性“ data-tap-disabled =“ true” ”，因此Ionic将让Leaflet处理相关事件：< / p>

<ion-content data-tap-disabled="true">
    <leaflet height="480px"></leaflet>
</ion-content>

缩放控件不适用于传单

1 个答案: