Question

作为初学者，我想获得最基本的工作示例。所以我从here下载了一张地图查看该文件，发现第一个且'g'的ID为'admin1'。

所以，我开始了：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="map.css" type="text/css" />
    <link rel="stylesheet" href="k.css" type="text/css" />
    <script type="text/javascript" src="/js/script.min.js"></script>
    <script type="text/javascript">
        $script(['/js/jquery.min.js'], 'jquery');
        $script(['/js/raphael-min.js', '/js/kartograph.js', '/js/chroma.min.js'], 'kartograph');
    </script>
</head>

<body>
    <script>
        $script.ready(['jquery','kartograph'], function() {
            $(function() {
                map = $K.map('#map');
                map.loadMap('DEU.svg', function(map) {
                    map.addLayer({ id: "admin1" });
                });
            });
        });
    </script>
    <div id="map"></div>        
</body>
</html>

基本上就是这样 - 它没有显示任何东西。我检查了文件位置，并检查$script.ready函数之后的所有内容是否都在运行。一切都好 - 但没有结果。我从kartograph lib文件夹（在git上）中获取了我包含的所有文件 - 并添加了k.css和一个小map.css

map.css看起来像这样：

#map {
width: 900px;
height: 900px;
}

Answer 1

如果我在2年后复活这件事导致OP感到沮丧，我最诚挚的道歉。我打算只帮助那些可能像我在这个问题上一样傻眼的人。

以下loadMap()功能对我有用：

map.loadMap('DEU.svg', function () {
    map.addLayer("admin1");
});

所以看来你不需要说map.addLayer({ id: "admin1" })。您可以在图层名称后添加样式或事件处理程序，如此

map.loadMap('DEU.svg', function () {
    map.addLayer("admin1", {
        styles: {
            stroke: '#aaa',
            fill: '#f6f4f2'
        }
    });
});

Answer 2

当我尝试重现您的问题时，我发现可能未加载Raphaël。如果您从kartograph.org复制了文件，请尝试将/js/raphael-min.js更改为/js/raphael.min.js。

kartograph.js - 非常简单的地图

2 个答案: