android - 如何在webview中获取点击区域的svg地图ID
问题描述
单击 SVG 特定区域时，我试图显示一个对话框。ID 存储在 SVG 的路径中。
单击区域检索ID。
如何从路径中获取 ID。
<path
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; opacity: 0.7;"
d="M925,0L937,94L894,98L906,200L1651,261L1667,63L925,0Z"
fill="#ff9c00"
id="1"
stroke="#c86400"
stroke-opacity="1"
stroke-width="2">
</path>
ID 在路径中。
我正在检索的我的 Html 文件
<html class="gr__192_168_1_3"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ground Floor</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
body {
background: #a5a4a0;
height:3309px;
width:2339px;
}
tspan {
font-size: 20px;
}
.map-bg{
background: url(../../assets/images/altimus/altimus-ground-floor.jpg);
background-repeat:no-repeat;
width: 150%;
height: 100%;
}
#map {
margin: auto;
padding-top: 695px;
padding-left: 630px;
}
</style>
</head>
<body data-gr-c-s-loaded="true">
<div class="map-bg">
<div id="map"><svg height="790" version="1.1" width="1667" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.2.0</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path fill="#FF9C00" stroke="#c86400" d="M925,0L937,94L894,98L906,200L1651,261L1667,63L925,0Z" stroke-width="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1;" id="1"></path><path fill="#dfdfdf" stroke="#c86400" d="M908,205L928,355L1637,414L1649,266L908,205Z" stroke-width="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1;" id="2"></path><path fill="#dfdfdf" stroke="#c86400" d="M1110,376L1106,421L934,406L968,668L1624,584L1637,421L1110,376Z" stroke-width="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1;" id="3"></path><path fill="#dfdfdf" stroke="#c86400" d="M770,353L776,405L840,397L876,680L744,697L701,361L770,353Z" stroke-width="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; opacity: 1;" id="4"></path><path fill="#dfdfdf" stroke="#c86400" d="M617,259L623,303L686,295L738,698L606,715L548,269L617,259Z" stroke-width="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; opacity: 1;" id="5"></path><path fill="#dfdfdf" stroke="#c86400" d="M415,330L501,319L496,275L542,269L599,715L466,733L415,330Z" stroke-width="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1; opacity: 1;" id="6"></path><path fill="#dfdfdf" stroke="#c86400" d="M271,304L318,299L323,341L409,332L461,734L329,750L271,304Z" stroke-width="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1;" id="7"></path><path fill="#dfdfdf" stroke="#c86400" d="M139,365L161,363L155,319L177,317L168,243L286,229L294,297L265,299L323,752L191,768L139,365Z" stroke-width="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1;" id="8"></path><path fill="#dfdfdf" stroke="#c86400" d="M6,264L74,256L82,329L105,327L110,369L132,367L185,768L0,790L6,264Z" stroke-width="0" stroke-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); stroke-opacity: 1;" id="9"></path><text x="1280.5" y="130.5" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="5.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">1</tspan></text><text x="1278.5" y="309.5" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="5.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">2</tspan></text><text x="1285.5" y="522" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="5.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">3</tspan></text><text x="788.5" y="525" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="5.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">4</tspan></text><text x="643" y="487" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="5.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">5</tspan></text><text x="507" y="501" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="5.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">6</tspan></text><text x="366" y="524.5" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="5.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">7</tspan></text><text x="231" y="498.5" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="5.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">8</tspan></text><text x="92.5" y="523" text-anchor="middle" font-family=""Arial"" font-size="10px" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-family: Arial; font-size: 10px;"><tspan dy="5.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">9</tspan></text></svg></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script>
let rsr = Raphael('map', '1667', '790');
let regions = [];
const default_fill = '#DFDFDF';
const default_color = '#000000';
let $map = $('#map');
let $infobox = $('.infobox');
let trending_shops = [{"bookings":"10","shop_id":"1"},{"bookings":"3","shop_id":"23"},{"bookings":"1","shop_id":"252"}];
let shop1 = rsr.path("M 925 0 937 94 894 98 906 200 1651 261 1667 63 925 0 z").attr({
fill: default_fill,
stroke: '#C86400',
'stroke-width': '0',
'stroke-opacity': '1'
}).data({
'id': '1',
'name': 'Shop 1'
});
regions.push(shop1);
let shop2 = rsr.path("M 908 205 928 355 1637 414 1649 266 908 205 z").attr({
fill: default_fill,
stroke: '#C86400',
'stroke-width': '0',
'stroke-opacity': '1'
}).data({
'id': '2',
'name': 'Shop 2'
});
regions.push(shop2);
let shop3 = rsr.path("M 1110 376 1106 421 934 406 968 668 1624 584 1637 421 1110 376 z").attr({
fill: default_fill,
stroke: '#C86400',
'stroke-width': '0',
'stroke-opacity': '1'
}).data({
'id': '3',
'name': 'Shop 3'
});
regions.push(shop3);
let shop4 = rsr.path("M 770 353 776 405 840 397 876 680 744 697 701 361 770 353 z").attr({
fill: default_fill,
stroke: '#C86400',
'stroke-width': '0',
'stroke-opacity': '1'
}).data({
'id': '4',
'name': 'Shop 4'
});
regions.push(shop4);
let shop5 = rsr.path("M 617 259 623 303 686 295 738 698 606 715 548 269 617 259 z").attr({
fill: default_fill,
stroke: '#C86400',
'stroke-width': '0',
'stroke-opacity': '1'
}).data({
'id': '5',
'name': 'Shop 5'
});
regions.push(shop5);
let shop6 = rsr.path("M 415 330 501 319 496 275 542 269 599 715 466 733 415 330 z").attr({
fill: default_fill,
stroke: '#C86400',
'stroke-width': '0',
'stroke-opacity': '1'
}).data({
'id': '6',
'name': 'Shop 6'
});
regions.push(shop6);
let shop7 = rsr.path("M 271 304 318 299 323 341 409 332 461 734 329 750 271 304 z").attr({
fill: default_fill,
stroke: '#C86400',
'stroke-width': '0',
'stroke-opacity': '1'
}).data({
'id': '7',
'name': 'Shop 7'
});
regions.push(shop7);
let shop8 = rsr.path(
"M 139 365 161 363 155 319 177 317 168 243 286 229 294 297 265 299 323 752 191 768 139 365 z").attr({
fill: default_fill,
stroke: '#C86400',
'stroke-width': '0',
'stroke-opacity': '1'
}).data({
'id': '8',
'name': 'Shop 8'
});
regions.push(shop8);
let shop9 = rsr.path("M 6 264 74 256 82 329 105 327 110 369 132 367 185 768 0 790 6 264 z").attr({
fill: default_fill,
stroke: '#C86400',
'stroke-width': '0',
'stroke-opacity': '1'
}).data({
'id': '9',
'name': 'Shop 9'
});
regions.push(shop9);
for (let i = 0; i < regions.length; i++) {
let myWords = rsr.set();
myWords.push(
rsr.text(regions[i].getBBox().cx, regions[i].getBBox().cy, regions[i].data('id')),
);
regions[i].node.id = regions[i].data('id');
jQuery.each(trending_shops, function (i, val) {
if (regions[i].data('id') == val.shop_id) {
regions[i].node.setAttribute('fill', '#FF9C00');
}
});
regions[i].mouseover(function (e) {
this.node.style.opacity = 1;
});
regions[i].mouseout(function (e) {
this.node.style.opacity = 1;
});
regions[i].mousedown(function (e) {
});
}
</script>
</body></html>
单击该区域时我的需求 ID 我想检索该区域的 ID。
我WebView这样实现
WebSettings setting = wv.getSettings();
setting.setBuiltInZoomControls(true);
setting.setSupportZoom(true);
setting.setUseWideViewPort(true);
setting.setLoadWithOverviewMode(true);
setting.setJavaScriptEnabled(true);
String url="http://192.168.1.3:8011/map/1";
wv.loadUrl(url);
wv.setWebViewClient(new WebViewController());
WebViewController 类
public class WebViewController extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
Log.e("New Url",url);
return true;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
Log.e("New Url",url);
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
Log.e("New Url",url);
}
}
请帮我弄清楚我的代码有什么问题。
任何帮助将不胜感激。
解决方案
您必须通过从您身边制作一个 html 并将其放入 assets 文件夹并像这样加载您的特定 svg 来实现这一点
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('object').on("click", function(){
jsondata.returnPathId($(this).attr('id'));
});
});
function loadURL(url){
$('#main').html('<object data="'+url+'" type="image/svg+xml">');
}
</script>
</head>
<body>
<div id="main">
</div>
</div>
</body>
</html>
并从您的 webview 加载它并像这样使用 JavascriptInterface
void loadatainWebview() {
try {
stepView.setStepSize(mList.size());
WebSettings settings = webview.getSettings();
settings.setJavaScriptEnabled(true);
settings.setEnableSmoothTransition(true);
settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setSupportZoom(false);
settings.setBuiltInZoomControls(false);
settings.setAppCacheEnabled(true);
webview.setWebChromeClient(new WebChromeClient() {
@Override
public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {
quotaUpdater.updateQuota(estimatedSize * 2); // try to keep quota size as big as possible else database will not get created in HTML 5 app
}
});
webview.setWebViewClient(new WebViewClient());
webview.addJavascriptInterface(new JavaScriptInterface(getApplicationContext()), "jsondata");
webview.loadUrl("file:///android_asset/index.html");
loadsvgUrl();
} catch (Exception e) {
}
}
void loadsvgUrl(){
String url="http://192.168.1.3:8011/map/1";
webview.loadUrl("javascript:loadURL(url)");
}
public class JavaScriptInterface {
Context mContext;
JavaScriptInterface(Context c) {
mContext = c;
}
@JavascriptInterface // must be added for API 17 or higher
public String returnPathId(String id) {
Log.e("Your Path ID",String.valueOf(id));
}
推荐阅读
- android - 如何检查 Uri 数据是否包含一些单词，然后在 webview 中替换它？
- javascript - Typescript -> 调用函数，它将在另一个函数中调用回调
- wordpress - 在每个wordpress帖子中，获取当前登录用户的角色
- reactjs - 在组件中创建全选复选框功能
- python - 为什么我在 Python 中的快速排序功能不起作用？
- javascript - 为什么只有一张卡片翻转？
- javascript - API 与 websocket 一起休息
- python - Pyspark：从表中读取数据并写入文件
- javascript - 通用处理程序后如何生成警报或js函数
- haskell - 比较两个字符串列表并删除部分匹配的项目