Question

我尝试将一个迷你地图添加到我的Leaflet地图中作为控件。我遵循以下示例（https://github.com/jieter/leaflet.layerscontrol-minimap）

但是它不起作用控制台错误：

未捕获的ReferenceError：底图未定义

我尝试定义底图

var baseMaps = {
                "<span style='color: gray'>Grayscale</span>": grayscale,
                "Streets": streets
            };

现在错误是：

未捕获的ReferenceError：未定义灰度

我的代码

<!DOCTYPE html>
<html>
    <head>
        <title>Web Map</title>

        <link rel="stylesheet" href="control.layers.minimap.css" />



        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
              integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
              crossorigin=""/>
        <!-- Make sure you put this AFTER Leaflet's CSS -->
        <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
                integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
                crossorigin=""></script>
        <!--<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script src="js/leaflet-providers.js"></script>
        <script src="L.Control.Layers.Minimap.js"></script>
        <style>
            #map {
                width: 1150px;
                height:750px;
                border: solid 1px black;
            }
        </style>
        <link rel="stylesheet" href="control.layers.minimap.css" />
    </head>
    <body>
        <div id="map"></div>
        <script>

            var southWest = L.latLng(34.213648,32.093747),
                northEast = L.latLng(35.935348,34.943453),
                bounds = L.latLngBounds(southWest, northEast);

            var map = L.map('map',{
                center: [35.126411,33.429859],
                maxBounds: bounds,
                minZoom: 9,
                maxZoom: 17,
                zoom: 9
            });

            $.getJSON("https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson", function(data) { addDataToMap(data, map); });

            L.tileLayer('http://tile1.maps.2gis.com/tiles?x={x}&y={y}&z={z}', {
                attribution: '&copy; <a href="http://www.acgoldman.com/">Goldman Solutions & Services</a> contributors'}).addTo(map);

            //https://savaslabs.com/2015/05/18/mapping-geojson.html
            function addDataToMap(data, map) {
                var dataLayer = L.geoJson(data, {
                    onEachFeature: function(feature, layer) {
                        var popupText = "name: " + feature.properties.name
                        + "<br>Location: " + feature.properties.place
                        + "<br><a href='" + feature.properties.url + "'>More info</a>";
                        layer.bindPopup(popupText); }
                });
                dataLayer.addTo(map);
            }

            //Add scale to map
            L.control.scale().addTo(map);


            //Add Layer control
            L.control.layers.minimap(basemaps, overlays, options).addTo(map);

        </script>
    </body>
</html>

使用小地图的小叶图层控件不起作用

0 个答案: