2014-02-27 61 views
0

我已经创建了一个高层地图。 JS当前代码的小提琴在这里:http://jsfiddle.net/z8X6B/Highcharts地图不能正确缩放

我遇到的问题是放大/缩小控件没有做任何事情。如果我点击放大,最终地图上的一个项目的标签将开始移动,但项目本身不会移动......任何想法这里有什么问题?

(PS请忽略该地图是颠倒渲染。这是一个很容易解决,一旦我得到的缩放问题想通了。)

如果你不想看JS小提琴,这是我的代码:

$(function() { 
     var ziggity = [ 
      { 
       "name": "NC", 
       "path": "M 1221.648339 1496.391992 L 1251.769129 1516.716005 1285.691083 1567.0347 1322.344871 1588.961523 1367.204249 1602.683275 1396.729847 1599.522719 1413.409369 1616.742001 1461.498256 1612.035805 1474.546765 1581.433762 1539.247921 1592.400537 1623.318062 1714.538994 1673.870442 1745.102025 1700.481277 1752.528223 1719.631016 1739.195908 1748.867424 1747.600069 1735.370335 1788.955671 1749.279688 1795.547843 1766.863095 1830.481442 1757.871313 1871.720684 1778.45624 1907 1982.022936 1897.97301 2041.158198 1898.211111 2341.451457 1887.522793 2415.395923 1889.640817 2708.347125 1877.270995 2830.379806 1876.36231 3200.180822 1875.288164 3531.997105 1875.977581 3907.795109 1875.249153 4419.870741 1878.320926 4673.524423 1877.729709 4978.370739 1877.20777 4980.769668 1882.743284 5056.94493 1881.705459 5399.710743 1881.706132 5732.93195 1881.951632 5737.598665 1847.810358 5765.120783 1749.240545 5818.608776 1616.380141 5888.589997 1495.002397 5946.12261 1386.439737 5974.963568 1341.209275 5988.277728 1300.262615 6000 1237.999854 5983.05819 1101.123344 5950.091235 974.6876334 5933.282587 957.9687672 5900.725205 951.9234211 5878.460959 962.4160112 5849.211101 957.0620998 5726.053942 916.7611374 5658.21945 886.9083734 5597.810408 843.7723939 5580.31174 842.410375 5512.9265 793.7926898 5428.855686 727.5750299 5344.784873 647.777537 5298.004737 592.0618836 5265.860963 533.7990867 5244.079597 524.1290888 5204.170071 537.8972503 5183.320165 582.0555847 5130.810037 598.6500195 5045.978587 598.8538179 4924.432149 581.2020529 4840.362007 558.4264063 4776.80416 529.1769663 4725.758139 495.0814293 4642.528666 459.40326 4577.070909 423.4325088 4504.8293 370.1079553 4459.423824 331.4884977 4395.894896 250.3908653 4365.86557 186.5690135 4319.619426 68.43052026 4323.173097 34.84279773 4307.154004 7.345485667 4275.849554 0 4251.868328 9.571798052 4243.024503 34.27848471 4206.895292 63.95502702 4153.918425 73.87523287 4075.244026 74.1637791 3983.330791 60.77832811 3915.87628 40.32450345 3887.778473 66.06363407 3663.375994 256.5949455 3443.602569 441.0486259 3338.202332 533.1580971 3124.976699 707.472976 2990.769131 707.9209289 2795.92117 712.1220005 2370.264841 717.5673858 2380.654822 795.6114054 2277.818958 911.0460388 2206.167834 868.8698623 2195.577437 896.7330698 2212.23342 912.8109463 2187.603872 940.5281992 2068.483264 946.6118836 1772.322728 958.2956518 1501.286726 967.0670535 1376.643267 973.3706788 1344.072435 963.0919761 1280.688101 973.4110349 1269.201889 951.9873183 1252.451079 958.6164829 1172.350235 933.8142867 1149.217747 932.7825154 1072.597268 902.1226291 1052.664026 884.0599042 1033.705958 896.443851 816.163329 839.2484733 551.7020216 834.0015057 472.0410147 829.7842916 189.9868845 830.0405529 0 831.0057367 22.36109058 989.7189413 66.0099071 1019.78492 82.55492167 1002.701504 150.513833 1005.075789 200.65664 1037.746755 190.6917003 1072.742233 211.4911664 1088.770337 206.442452 1115.836511 221.7600916 1135.017773 275.8035971 1158.979889 295.448322 1186.660149 333.7646146 1191.130934 369.983273 1216.884189 457.9359543 1219.301521 484.2347328 1227.719806 497.5872274 1217.264882 553.8548037 1217.463972 589.1850443 1250.302416 605.4778585 1249.887421 663.7267206 1286.399617 680.1869959 1278.988216 718.0230991 1306.803669 727.1433358 1327.622044 764.1165775 1329.726615 781.9293191 1353.270373 808.1749674 1354.173005 836.0521837 1369.802928 894.1140813 1359.27469 914.8005617 1370.866985 942.3953136 1422.938481 958.553621 1429.663827 948.3902837 1455.412374 957.2603377 1474.478621 988.8042106 1477.405785 1009.781898 1458.993307 1054.132841 1514.299346 1133.549717 1555.730952 1164.295292 1532.999025 1148.693171 1514.569732 1150.692615 1489.483698 1186.347017 1480.398191 1221.648339 1496.391992 Z" 
      } 
     ]; 
      // Initiate the chart 
      $('#container').highcharts('Map', { 

       title : { 
        text: '' 
       }, 

       mapNavigation: { 
        enabled: true 
       }, 


       series : [{ 
        name: 'States and territories', 
        data: ziggity, 
        color: Highcharts.getOptions().colors[2], 
        states: { 
         hover: { 
          color: Highcharts.getOptions().colors[4] 
         } 
        }, 
        dataLabels: { 
         enabled: true, 
         format: '{point.name}', 
         style: { 
          width: '80px' // force line-wrap 
         } 
        }, 
        tooltip: { 
         pointFormat: '{point.name}' 
        } 
       }] 
      }); 
    }); 

回答