Карта листовок с использованием MapBox не может быть правильно отображена в Android - PullRequest
Новая
       14

Карта листовок с использованием MapBox не может быть правильно отображена в Android

0 голосов
/ 06 июля 2019

Я пытаюсь создать Leaflet Map в Android, используя MapBox в качестве учебного пособия здесь: 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");
    }
}

leaflet.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>

Листовка не может быть отображена на весь экран в моем текущем местоположении с маркером в качестве учебного пособия. Она показывает только так:

enter image description here

Когда я нажимаю + знак на карте:

enter image description here

Итак, пожалуйста, помогите мне исправить мою проблему, чтобы карта листовок могла отображаться корректно. Спасибо.

Ответы [ 2 ]

1 голос
/ 06 июля 2019

Проблема, похоже, связана с плитками, которые вы используете. Попробуйте использовать разные плитки (например, заменив 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);

Кроме того, вы должны отредактировать свой вопрос, чтобы удалить токен доступа, вы не хотите делиться им с миром, поскольку им можно злоупотреблять.

0 голосов
/ 06 июля 2019

Попробуйте настроить веб-просмотр с помощью экземпляра WebChromeClient, например: 

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);

        webView.setWebChromeClient(new WebChromeClient()); // <-- ADD THIS LINE

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.loadUrl("file:///android_asset/leaflet.html");
    }
}```
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...