Javascript 利弗特不显示地图_Javascript_Android_Html_Google Maps

Javascript 利弗特不显示地图

javascript android html google-maps

Javascript 利弗特不显示地图,javascript,android,html,google-maps,Javascript,Android,Html,Google Maps,我想在android设备上显示地图。我看到了变焦控制器和一个市场。但地图不显示我遵循leftlet示例，如果我在html中传递代码，地图将显示，但不会在android中显示活动： override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_map) Log.d("----->Map

我想在android设备上显示地图。我看到了变焦控制器和一个市场。但地图不显示

我遵循leftlet示例，如果我在html中传递代码，地图将显示，但不会在android中显示

活动：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_map)
    Log.d("----->Map", "")
    // init webView

    // displaying content in WebView from html file that stored in assets folder
    webView = map_location
    //webView.clearCache(true)
    //webView.clearHistory()


    webView.getSettings().setJavaScriptEnabled(true);
    webView.loadUrl("file:///android_asset/map.html");



}

HTML:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="./leaflet.js"></script>
    <link rel="stylesheet" href="./leaflet.css">


    <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').setView([41.66, -4.72], 10);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        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>',
        id: 'mapbox.streets'
    }).addTo(map);

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

    //L.control.scale().addTo(map);
    L.marker([41.66, -4.71], {draggable: true}).addTo(map);


</script>

</body>
</html>


身体{
填充：0；
保证金：0；
}
html，body，#map{
身高：100%；
宽度：100vw；}
var map=L.map（'map'）.setView（[41.66，-4.72]，10）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbdhrqcmz3n3gifq.rjfig214ariislb6b5aw'{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒。街道”
}).addTo（地图）；
locate（{setView:true，maxZoom:16}）；
//L.control.scale（）.addTo（映射）；
标记（[41.66，-4.71]，{draggable:true}）.addTo（map）；

我希望能显示完整的地图

你能试试这个吗

width: 100%;
height: auto;
}

你能试试这个吗

width: 100%;
height: auto;
}

我知道问题出在哪里了，我在测试leaftlet库时只是创建了webview，但我忘了给应用程序授予internet权限，这使得整个地图都显示出来了

我知道问题出在哪里了，我只是在测试leaftlet库时创建了webview，但我忘了给应用程序授予internet权限，这使得完整的地图显示了

实际上是显示了，但地图“the street the names…”没有显示。实际上是显示了，但地图“the street the names…”没有显示。