1

私は JqvMap を使用しており、地域をクリックしたいと思います。これにより、国名をタイトルとして (ブートストラップ) ポップオーバーが表示され、コンテンツはいくつかの html リンクである必要があります。これは私のコードです:

<script type="text/javascript">
jQuery(document).ready(function() {
        jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#333333',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: false,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial',
        regionsSelectableOne: 'true',
        onRegionClick: function(element, code, region) {
            $(".popover-title").html(region);
            jQuery('.jvectormap-region').popover({
                placement: 'top',
                container: '#vmap',
                content: '<a href="#">page 1</a></br><a href="#">page 2</a></br><a href="#">page 3</a></br><a href="#">page 4</a></br>',
                trigger: 'click',
                html: 'true',
                title: ' '
            });
        },
        onRegionOver: function (event, code, region) {
            document.body.style.cursor = "pointer";
        },
        onRegionOut: function (element, code, region) {
            document.body.style.cursor = "default";
            $('.jvectormap-region').popover('destroy');
            // $('#vmap').vectorMap('deselect', code);
        }
    });
});
</script>

現時点での問題は、マップを 2 回クリックしてポップオーバーを表示する必要があることです。初期化されていないことが原因である可能性があると読みましたが、初期化できないようです(どこで?どのように?)!

誰かがこれらの問題について私を助けることができますか? 私は問題が何であるかを理解できないようです..

4

2 に答える 2

0

だから私はそれをちょっと修正しました（おそらく厄介な方法ですが、うまくいきます）。それが他の誰かを助けることを願っています。

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#333333',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        showTooltip: false,
        values: sample_data,
        scaleColors: ['#C8EEFF', '#006491'],
        normalizeFunction: 'polynomial',
        regionsSelectableOne: true,
    });
    runPopOver();
});
</script>

<script type="text/javascript">
function runPopOver() {
    var currentRegion;
    jQuery('#vmap').bind('regionMouseOver.jqvmap',
        function(event, code, region) {
            document.body.style.cursor = "pointer";
            currentRegion = region;
        }
    );
    jQuery('#vmap').bind('regionMouseOut.jqvmap',
        function(event, code, region) {
            document.body.style.cursor = "default";
        }
    );
    jQuery('#vmap').bind('regionClick.jqvmap',
        function(event, code, region) {
            if ($('#vmap [id^="popover"]').length > 1) {
                $('#vmap [id^="popover"]').first().remove();
            }
            var snapshot_url = "http://www.business-anti-corruption.com/country-profiles/europe-central-asia/" + region + "/snapshot.aspx";

            $(".popover-title").html(region);
            $(".popover-content").html('<a href=' + snapshot_url + ' target="_blank">Snapshot</a></br><a href="#">page 2</a></br><a href="#">page 3</a></br><a href="#">page 4</a></br>');
        }
    );

    jQuery('.jvectormap-region').popover({
        placement: 'left',
        container: '#vmap',
        html: 'true',
        title: ' '
    });
}
</script>

したがって、基本的に、複数のポップオーバーがある場合にリージョンをクリックすると (開かれる場合でも)、すべてのポップオーバーのリストを取得し (2)、最初のものを取得して DOM から削除します (.first().remove( )))。

于 2014-07-04T06:59:36.073 に答える