2013-04-11 3 views
6

Gibt es ein Beispielprojekt, das zeigt, wie Sie die Broschüre richtig verwenden, um eine Online-Karte in einer Android-Anwendung anzuzeigen. Weil ich viele Beispiele ausprobiert habe, aber jedes Mal, wenn ich eine leere Webansicht in meiner Anwendung habe. dies ist mein Code:Verwenden Sie die Broschüre in einer Android-Anwendung, um Online-Karte zu zeigen

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

} 

und das ist das HTML-Objekt:

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

+0

Was genau hast du probiert? – jgillich

+0

Eine einfache Webansicht, die ein HTML-Objekt mit der Flugblatt-Map lädt. – user1260270

+0

Sie haben ein mobiles Beispiel [hier] (http://leafletjs.com/examples/mobile.html), funktioniert es? Und Sie müssen Ihren Code posten, wenn Sie eine hilfreiche Antwort wünschen. – jgillich

Antwort

6

Mir scheint, dass es nicht funktioniert, weil Sie Javascript nicht aktiviert haben.

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

In Aktivität

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

In .html

<html> 
<head> 

<meta charset="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7 /leaflet.css" /> 
</head> 
<body> 
<div id="mapid" style="width: 600px; height: 400px"></div> 

<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
<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.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { 
     maxZoom: 18, 
     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://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(); 




    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> 

0

Versuchen Sie dies, android Compiler 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/#"); 
Verwandte Themen