Unable to implement Visualization:Geomap in androi

2019-08-03 13:01发布

站内问答 / Android
752 2 5

I am trying to implement Visualization: Geomap in android Webview.

For Visualization:Geomap, I refer developers.google.com /chart/interactive/docs/gallery/geomap

Here I have implemented first example to show regions on map. In android webview when I touch on specific region it shows the popup with country name, as I touch outside region of map it shows the same popup.

ISSUE: In android webview , popup doesn’t disappear when I touch outside Google map. It should work similarly as on desktop web browser

DESKTOP VERSION:

I created demo.html file on desktop . Its running properly in web browser . 

    <html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["geomap"]});
      google.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

ANDROID VERSION:

DOWNLOAD APP

http://i62.tinypic.com/edb9w.jpg

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.Display;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.WindowManager;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Toast;

public class WebActivity extends ActionBarActivity {

    WebView webView;
    StringBuilder build = new  StringBuilder();

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web);

        webView=(WebView)findViewById(R.id.webView1);

        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setUseWideViewPort(true);
        webView.getSettings().setLoadWithOverviewMode(true);

        int currentapiVersion = android.os.Build.VERSION.SDK_INT;
        if (currentapiVersion >= android.os.Build.VERSION_CODES.HONEYCOMB)
            webView.setLayerType(View.LAYER_TYPE_SOFTWARE,null);

        webView.setInitialScale(getScale());

        webView.setWebChromeClient(new WebChromeClient());

        build.append("['Germany', 200],");
        build.append("['United States', 700],");
        build.append("['Brazil', 300],");
        build.append("['Canada', 400],");
        build.append("['France', 500]");

        drawMap();
        //webView.loadUrl("http://www.stalwarttech.net/dummy/demo3.html");

    }



    void drawMap()
    {
        if(build.length() > 0)
        {
            String js = "<html><head>" +
                    "<script type='"+"text/javascript"+"' src='"+"https://www.google.com/jsapi"+"'></script>"+
                    "<script type='"+"text/javascript"+"'>" +
                    "google.load('"+"visualization"+"', '"+"1"+"', {packages:['"+"geochart"+"']});" +
                    "google.setOnLoadCallback(drawRegionsMap);" +
                    " function drawRegionsMap() {" +
                    "  var data = google.visualization.arrayToDataTable([" +
                    "['Country', 'Popularity']," + build +
                    "]);" +
                    "var options = {colors: ['#CB96CE', '#871F7B']};" +
                    "var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));" +
                    "chart.draw(data, options);" +
                    "}" +
                    "</script>" +
                    "</head>" +
                    "<body>" +
                    "<div id='"+"regions_div"+"' style='"+"width:100%; height: 100%;"+"'></div>" +
                    "</body>" +
                    "</html>";

            Log.d("tag",js);

            webView.loadDataWithBaseURL("file:///android_asset/", js, "text/html","UTF-8",  null);
        }
        else
        {
            Toast.makeText(this, "No data found", Toast.LENGTH_LONG).show();
        }

    }

    private int getScale(){
        Display display=((WindowManager)getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
        int width=display.getWidth();
        Double val=new Double(width)/new Double(800);
        val=val*100d;

        return val.intValue();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.web, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

2条回答
唯我独甜
2楼-- · 2019-08-03 13:46

ALL PLATFORM SUPPORT

All what you need to do is just create ".html" file programmatically and store the html content into that file then open the same file in webview with absolute address of that file ... simple as that :)

here you go, out of the box

private void loadWorldMap() { try {

        String htmlDocument = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n" +
                "<html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html,width=device-width,user-scalable=yes; charset=windows-1252\">\n" +
                "    <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>\n" +
                "    <script type=\"text/javascript\">\n" +
                "     google.load('visualization', '1', {'packages': ['geochart']});\n" +
                "     google.setOnLoadCallback(drawRegionsMap);\n" +
                "\n" +
                "      function drawRegionsMap() {\n" +
                "        var data = google.visualization.arrayToDataTable([\n" +
                "          ['Country', ''],\n"

                //add your city data buffer [List of countries] ;)

                + build +


                "        ]);\n" +
                "\n" +
                "        var options = {};\n" +
                "\t\toptions = { \n" +
                "                    datalessRegionColor: '#29ABE2',\n" +
                "\t\t\t\t    backgroundColor: '#F3F3F3',\n" +
                "\t\t\t\t\tcolorAxis: {colors: ['#0071BC']},\n" +
                "                    keepAspectRatio: false,                    \n" +
                "                    legend: false,\n" +
                "                    tooltip: { textStyle: { color: '#0099CB', fontName: 'Arial', fontSize: '10'} }\n" +
                "                };\n" +
                "\t\t\n" +
                "        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));\n" +
                "        chart.draw(data, options);\n" +
                "    };\n" +
                "    </script>\n" +
                "  </head>\n" +
                "  <body>\n" +
                "  <div id=\"chart_div\" style=\"width: 100%; height: 100%;\"><div style=\"position: relative;\"><div dir=\"ltr\" style=\"position: relative; width: 100%; height: 100%;\"><div style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;\"></div></div></div></div>\n" +
                "  \n" +
                "</body></html>";


        // Creates a trace file in the primary external storage space of the
        // current application.
        // If the file does not exists, it is created.

        File traceFile = new File((this).getCacheDir(), "TraceFile.html");
        if (!traceFile.exists())
            traceFile.createNewFile();
        // Adds a line to the trace file
        BufferedWriter writer = new BufferedWriter(new FileWriter(traceFile, false /*append*/));
        writer.write(htmlDocument);
        writer.close();


        MediaScannerConnection.scanFile(getApplicationContext(),
                new String[]{traceFile.toString()},
                null,
                null);
        Log.d("file created", "Success.");
        Log.d("absolute path ", traceFile.getAbsolutePath());


        absoluteDir = traceFile.getAbsolutePath();

         // Load world map 
        mapView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

        mapView.getSettings().setJavaScriptEnabled(true);
        mapView.getSettings().setBuiltInZoomControls(false);
        mapView.getSettings().setUseWideViewPort(true);
        mapView.requestFocusFromTouch();
        mapView.requestFocus(View.FOCUS_DOWN);
        mapView.getSettings().setLoadWithOverviewMode(true);

        //webView.setWebViewClient(new WebViewClient());
        mapView.setWebChromeClient(new WebChromeClient() {
            public void onProgressChanged(WebView view, int progress) {
                llLoadingMap.setVisibility(View.VISIBLE);
                if (progress == 100)
                    llLoadingMap.setVisibility(View.GONE);
            }
        });

        mapView.loadUrl("file:///" + absoluteDir);
        mapView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        int screenWidth = getWindowManager()
                .getDefaultDisplay().getWidth();
        mapView.setLayoutParams(new LinearLayout.LayoutParams(
                screenWidth, LinearLayout.LayoutParams.MATCH_PARENT, 1f));


    } catch (IOException e) {
        Log.e("error file", "Unable to write to the TraceFile.html file.");
    }

}
查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
3楼-- · 2019-08-03 13:55 
<html> <head>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> 
 </script>
  <script type="text/javascript">
     function loadGeoChart(mapsApiKey, dataList) {
         google.charts.load('current', {
             'packages': ['geochart'],
             // Note: you will need to get a mapsApiKey for your project.
             // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
             'mapsApiKey': mapsApiKey
         });
         google.charts.setOnLoadCallback(function() {
             drawRegionsMapAll(dataList)
         });
     }

     function drawRegionsMapAll(datalist) {
         var chart_data = [
             ['Country', 'Hits']
         ];

         chart_data = chart_data.concat(datalist);
         var data = google.visualization.arrayToDataTable(chart_data);
         var options = {
             colors: ['#81A9FF', '#2558C6']
         };
         var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
         chart.draw(data, options);


     }

     function onLoad() {
         Android.getMapData();
     }
     onLoad();
     </script>
  </head>
   <body>
     <div id="regions_div" style="width: 900px; height: 500px;"></div>
   </body>
</html>

Save the above geomap.html file in the assets folder.

In the Activity, load the html file in a webview, enabling the following Websettings.

    WebSettings webSettings = mapweb_view.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDomStorageEnabled(true);
    webSettings.setLoadWithOverviewMode(true);
    webSettings.setUseWideViewPort(true);
    webSettings.setBuiltInZoomControls(true);
    webSettings.setDisplayZoomControls(false);
    webSettings.setSupportZoom(true);
    webSettings.setDefaultTextEncodingName("utf-8");
    mapweb_view.addJavascriptInterface(new MapViewJSInterface(getContext(), this), "Android");

    mapweb_view.loadUrl("file:///android_asset/geomap.html");

Android Code:

 @JavascriptInterface
public void getMapData() {
    getMapHitsAll();//custom method to load data to show on map

}

Call this method inorder to initialize the map and set data

getMapHitsAll() will return the 'mapkey' and required 'dataString' to be shown on geochart and then the javascript method will be invoked as follows:

 mapweb_view.loadUrl("javascript:loadGeoChart('" + mapkey + "', " + dataString + ")");
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)