我正在尝试在Android Webview中实现Visualization：Geomap。
对于可视化：Geomap，我指的是developers.google.com / chart / interactive / docs / gallery / geomap
这里我已经实现了第一个在地图上显示区域的示例。在android webview中，当我触摸特定区域时，它会显示带有国家/地区名称的弹出窗口，因为当我触摸地图的外部区域时，它会显示相同的弹出窗口。
问题：在android webview中，当我在谷歌地图外触摸时，弹出窗口不会消失。它应该与桌面Web浏览器类似地工作
桌面版本：
我在桌面上创建了demo.html文件。它在Web浏览器中正常运行。
<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：
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);
}
}
答案 0 :(得分：1)
<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>
将上述geomap.html文件保存在资产文件夹中。
在“活动”中，将html文件加载到Web视图中，以启用以下Web设置。
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代码：
@JavascriptInterface
public void getMapData() {
getMapHitsAll();//custom method to load data to show on map
}
调用此方法以初始化地图并设置数据
getMapHitsAll（）将返回“ mapkey”和要求的“ dataString”以显示在geochart上，然后将按以下方式调用javascript方法：
mapweb_view.loadUrl("javascript:loadGeoChart('" + mapkey + "', " + dataString + ")");
答案 1 :(得分：0)
所有平台支持
您需要做的只是创建＆＃34; .html＆＃34;以编程方式文件并将html内容存储到该文件中，然后在webview中使用该文件的绝对地址打开相同的文件...简单如下：）
在这里，开箱即用
private void loadWorldMap（）{ 试试{
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.");
}
}