时间戳

首页 > 解决方案 > 使用 MapBox 的传单地图无法在 Android 中正确显示

android - 使用 MapBox 的传单地图无法在 Android 中正确显示

问题描述

我正在尝试使用 MapBox 作为教程在 Android 中创建 Leaflet Map：https ://leafletjs.com/examples/mobile/

我对教程做同样的事情。但是，传单地图显示不正确。下面是我的代码：

MainActivity.java

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.loadUrl("file:///android_asset/leaflet.html");
    }
}

传单.html

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
          crossorigin=""/>

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
            integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
            crossorigin="">
    </script>

    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100vw;
        }
    </style>

</head>

<body>

    <div id="map"></div>

    <script>

        var map = L.map('map').fitWorld();

        L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/1/1/0?access_token=pk.eyJ1IjoiMjc1dnl0cmFuIiwiYSI6ImNqeHFqM3JqZzAxaWIzY2xtZXBwY3o0eTUifQ.U9KOK-0qFwbfW6TBwgxe3g', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18
    }).addTo(map);

        map.locate({setView: true, maxZoom: 16});

        function onLocationFound(e) {
            var radius = e.accuracy;

            L.marker(e.latlng).addTo(map)
                .bindPopup("You are within " + radius + " meters from this point").openPopup();

            L.circle(e.latlng, radius).addTo(map);
        }

        map.on('locationfound', onLocationFound);

        function onLocationError(e) {
            alert(e.message);
        }

        map.on('locationerror', onLocationError);

    </script>


</body>

</html>

传单地图无法在我当前的位置全屏显示，标记为教程显示。它只显示如下：

在此处输入图像描述

当我在地图上按 + 号时：

在此处输入图像描述

所以，请帮我解决我的问题，以便可以正确显示传单地图。谢谢你。

标签： androidleaflet

解决方案

该问题似乎与您使用的瓷砖有关。尝试像这样的不同图块（在用您的真实访问令牌替换 YOUR_ACCESS_TOKEN 之后）：

        L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=YOUR_ACCESS_TOKEN', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18
    }).addTo(map);

此外，您应该编辑您的问题以删除访问令牌，您不想与世界分享它，因为它可能会被滥用。

推荐阅读