Geek Answers Handbook

Use the booklet in the Android app to show the online map

Is there any sample design that shows how to use the flyer to show the online map in the android app. Because I tried a lot of samples, but every time I have a blank webview in my application. this is my code:

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

and this is an HTML object:

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

+6
source share
3 answers

It seems to me that it does not work because you did not enable Javascript.

  WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true);
+6
source

In action

 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>

+1
source

Try this, Android 4.4x compiler (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/#");
0
source

More articles:


All Articles