Question

是否有任何示例项目显示如何正确使用传单在Android应用程序中显示在线地图。因为我尝试了很多样本但每次在我的应用程序中都有一个空的webview。这是我的代码：

private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mWebView= (WebView)findViewById(R.id.map);
    mWebView.setWebChromeClient(new WebChromeClient());
    mWebView.loadUrl("file:///android_asset/www/map.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="css/leaflet-0.5.css" />
    <script>L_PREFER_CANVAS = true;</script>
    <script type="text/javascript" charset="utf-8" src="js/leaflet-src-0.5.js"></script>            
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>

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

        L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
            maxZoom: 18
        }).addTo(map);
        map.locate({setView: true, maxZoom: 16});
        function onLocationFound(e) {
            var radius = e.accuracy / 2;

            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>

Answer 1

我觉得它没有用，因为你没有启用Javascript。

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

Answer 2

活动

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    WebView myWebView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    myWebView.loadUrl("file:///android_asset/www/index.html");
}

在.html中

<!DOCTYPE html>
<html>
<head>

<title>Quick Start - Leaflet</title>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

                   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
                   <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>



</head>
<body>



<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

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

L.marker([51.5, -0.09]).addTo(mymap)
    .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(mymap).bindPopup("I am a circle.");

L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap).bindPopup("I am a polygon.");


var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}

mymap.on('click', onMapClick);

</script>



</body>
</html>

Answer 3

试试这个，android编译器4.4x（eclipse）

 import android.webkit.WebView; //(dont forget to put WebView from Graphical layout palette or write manually inside layout folder activity_main.xml

 private WebView tampilWeb; //(this is variable declaration)

 // any  function here ... 
 tampilWeb = (WebView)findViewById(R.id.webView1);
 tampilWeb.getSettings().setJavaScriptEnabled(true);
 tampilWeb.setWebViewClient(new WebViewClient());
 tampilWeb.loadUrl("https://www.openstreetmap.org/#");

在Android应用程序中使用传单来显示在线地图

3 个答案: