2

J Vector Map ( http://jvectormap.com/documentation/javascript-api/ ) を使用して米国の地図を作成しています。

私ができるようにしたいのは、クリックできる各州のボタンを用意し、マップ内の対応する地域を選択できるようにすることです (または、既に選択されている場合は選択を解除します)。これに map.setSelectedRegion を使用しようとしていますが、コードを動作させることができません。現在 map.setSelectedRegion("US-CA") を試していますが、役に立ちません。

何をすべきかについてのアイデアはありますか？

ありがとう！

4

3 に答える 3

3

ハンドルを設定したら

var mapObject = $('#your_map_div_id').vectorMap('get', 'mapObject');

組み込み関数 setSelectedRegions を使用するだけです (「s」に注意してください)。

mapObject.setSelectedRegions(your_region_code); //to set
mapObject.setSelectedRegions({your_region_code:false}); //to unset

それでもうまくいかない場合は、コードを投稿してください。

于 2013-07-28T09:26:15.193 に答える
0

このコードは古くなっています。以下は、jvectormap の最新 API に従って更新されたバージョンのコードです。デモのスニペットは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <link rel="stylesheet" href="jqvmap.min.css" type="text/css" media="screen"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="jquery.vmap.min.js"></script>
  <script src="jquery.vmap.world.js"></script>

   <script>
        jQuery(document).ready(function () {
            $('#vmap').vectorMap({
                map: 'world_en',
                backgroundColor: '#2f95c9',
                color: '#ffffff',
                hoverOpacity: 0.7,
                selectedColor: '#666666',
                enableZoom: true,
                showTooltip: true,
                scaleColors: ['#C8EEFF', '#006491'],
                normalizeFunction: 'polynomial',
                regionsSelectableOne: false,
                regionsSelectable: false,
                series: {
                regions: [{
                  scale: ['#C8EEFF', '#0071A4'],
                  normalizeFunction: 'polynomial'
                }]
                }
            });

            var mapObj = $('#vmap').data('mapObject');

            $('#countries').on('mouseover mouseout', 'a:first-child', function (event) {
                // event.preventDefault();
                var elem = event.target,
                    evtype = event.type;


                if (evtype === 'mouseover') {
                    mapObj.select($(elem).attr('id'));
                } else {
                    mapObj.deselect($(elem).attr('id'));
                };
            });
      });
    </script>

</head>
<body>
<ul id="countries">
  <li><a id="RO" href="">Romania</a></li>
  <li><a id="AU" href="">Australia</a></li>
</ul>
    <div id="vmap" style="width: 100vw; height: 100vh;"></div>
</body>
</html>
于 2016-06-09T09:22:26.100 に答える