7

http://jvectormap.owl-hollow.net/の jVectorMap を使用していますが、すべて正常に動作します。しかし、世界地図の標準サイズは非常に小さいです。誰かが例えばボスニア・ヘルツェゴビナを打ちたいのなら、大きなメガネが必要です! 利用可能なズーム ボタンがありますが、コンテナ内でマップを移動する必要があります。

div 要素を拡大しようとしましたが、マップのサイズが固定されているようです。より大きな世界地図を提供するのを助けるために：

  • ユーザーがマップ Web サイトに入ったときに、別の標準ズームを取得する可能性はありますか?
  • もっと大きな世界地図が必要ですか？

または、より大きな世界地図を提供するために他に何ができますか?

乾杯！

4

4 に答える 4

7

ファイル jquery-jvectormap.js 内には、次のコードがあります。

WorldMap.prototype = {
  transX: 0,
  transY: 0,
  scale: 1,
  baseTransX: 0,
  baseTransY: 0,
  baseScale: 1,

scale: を 3 に変更したところ、うまくいくようです

于 2012-06-22T09:15:09.803 に答える
5

これらの値を変更するだけです:

$('#world-map').vectorMap({
        map: 'chile',
           focusOn: {
       x: 0.6,
       y: -0.2,
       scale: 2
     },
于 2015-12-10T23:30:01.090 に答える
2

より大きな世界地図にするには、コンテナーのサイズを調整するだけです。

デフォルトでズームインする場合、ズーム ボタンは次のコードにバインドされます。

this.container.find('.jvectormap-zoomin').click(function(){
    if (map.zoomCurStep < map.zoomMaxStep) {
        var curTransX = map.transX;
        var curTransY = map.transY;
        var curScale = map.scale;
        map.transX -= (map.width / map.scale - map.width / (map.scale * map.zoomStep)) / 2;
        map.transY -= (map.height / map.scale - map.height / (map.scale * map.zoomStep)) / 2;
        map.setScale(map.scale * map.zoomStep);
        map.zoomCurStep++;
        $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) - sliderDelta);
    }
});
this.container.find('.jvectormap-zoomout').click(function(){
    if (map.zoomCurStep > 1) {
        var curTransX = map.transX;
        var curTransY = map.transY;
        var curScale = map.scale;
        map.transX += (map.width / (map.scale / map.zoomStep) - map.width / map.scale) / 2;
        map.transY += (map.height / (map.scale / map.zoomStep) - map.height / map.scale) / 2;
        map.setScale(map.scale / map.zoomStep);
        map.zoomCurStep--;
        $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) + sliderDelta);
    }
});

そのコードをコピーして調整するだけです。

于 2011-10-14T07:58:00.563 に答える