как получить идентификатор карты SVG области щелчка в веб-просмотре - PullRequest
Новая
       39

как получить идентификатор карты SVG области щелчка в веб-просмотре

0 голосов
/ 09 октября 2018

Я пытаюсь показать диалог при нажатии на конкретную область SVG.Идентификатор хранится в пути SVG.

по щелчку области получения идентификатора. area

Как мне получить идентификатор из пути. 

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

Идентификатор находится в пути.

Мой 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="&quot;Arial&quot;" 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="&quot;Arial&quot;" 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="&quot;Arial&quot;" 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="&quot;Arial&quot;" 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="&quot;Arial&quot;" 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="&quot;Arial&quot;" 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="&quot;Arial&quot;" 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="&quot;Arial&quot;" 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="&quot;Arial&quot;" 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>

Мой идентификатор требования при нажатии на эту область. Я хочу получить идентификатор этой области.

Я реализую 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);
    }
}

Пожалуйста, помогите мне выяснить, что не так с моим кодом.

Любая помощь будетвысоко ценится.

1 Ответ

0 голосов
/ 09 октября 2018

Вы должны достичь этого, создав один html-файл со своей стороны, поместив его в папку активов и загрузив свой конкретный svg в таком виде, как этоэто 

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