Блог

Я использую JqvMap и хочу щелкнуть по региону, и это вызовет всплывающее окно (bootstrap) с названием страны в качестве заголовка, а содержимое должно содержать несколько 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>
  

Моя проблема на данный момент заключается в том, что мне нужно дважды щелкнуть по карте, чтобы отобразить всплывающее окно. Я читал, что это может быть связано с тем, что оно не инициализировано, но, похоже, я не могу его инициализировать (где? как?)!

Кто-нибудь может помочь мне с этими проблемами? Кажется, я не могу понять, в чем проблема..

Итак, я вроде как исправил это (возможно, неприятным образом, но это делает свое дело). Надеюсь, это поможет кому-то еще.

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

Итак, в основном, когда я нажимаю на регион, если есть более 1 всплывающего окна (даже для открытия) Я получаю список всех всплывающих окон (2), беру первое и удаляю его из DOM (.first().remove()).

Вот более постоянное исправление:

в jquery.vmap.js найдите этот фрагмент кода:

   jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'click', function (e) {
  if (!params.multiSelectRegion) {
    for (var key in mapData.pathes) {
      map.countries[key].currentFillColor = map.countries[key].getOriginalFill();
      map.countries[key].setFill(map.countries[key].getOriginalFill());
    }
  }

  var path = e.target;
  var code = e.target.id.split('_').pop();

  jQuery(params.container).trigger('regionClick.jqvmap', [code, mapData.pathes[code].name]);
  if (!regionClickEvent.isDefaultPrevented()) {
    if (map.selectedRegions.indexOf(code) !== -1) {
      map.deselect(code, path);
    } else {
      map.select(code, path);
    }
  }

  //console.log(selectedRegions);

});
  

Замените его этим:

         jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'mousedown mouseup', function (e) {

            var PageCoords;
            if (e.type == 'mousedown') {
                pageCoords = event.pageX   "."   event.pageY;
            }
            if (e.type == 'mouseup') {
                var pageCoords2 = event.pageX   "."   event.pageY;

                if (pageCoords == pageCoords2) {

                    //we have a click. Do the ClickEvent
                    if (!params.multiSelectRegion) {
                        for (var key in mapData.pathes) {
                            map.countries[key].currentFillColor = map.countries[key].getOriginalFill();
                            map.countries[key].setFill(map.countries[key].getOriginalFill());
                        }
                    }

                    var path = e.target;
                    var code = e.target.id.split('_').pop();

                    regionClickEvent = $.Event('regionClick.jqvmap');

                    jQuery(params.container).trigger('regionClick.jqvmap', [code, mapData.pathes[code].name]);

                    if (!regionClickEvent.isDefaultPrevented()) {
                        if (map.selectedRegions.indexOf(code) !== -1) {
                            map.deselect(code, path);
                        } else {
                            map.select(code, path);
                        }
                    }
                } 

            }
  

Вместо немедленного запуска щелчка, скрипт теперь проверяет, является ли это щелчком или перетаскиванием. Если это щелчок, он запускает код, который вы ввели в наш onRegionClick.