goMap jquery 插件。使用 JSON 文件中保存的坐标创建折线

发布于 2025-01-05 08:31:32 字数 1863 浏览 0 评论 0原文

下午好,我试图从数组中传递 2 条独立折线的坐标,到目前为止,数组是从 JSON 文件中保存的坐标填充的,只是我似乎无法使用该数组来实际填充折线坐标,它根本没有出现在地图上 - 控制台中没有发现任何错误。

我对此很陌生,所以请保持温柔,昨晚是一个很晚的夜晚,试图让事情正常运转。我使用最新版本的 goMap jquery 插件,我开始接近插件的限制,但知道我缺乏技能,这是在黑暗中刺伤?

非常感谢任何指导。谢谢。

ps 我打算对每条折线使用 JSON 文件中的其他属性、颜色、id 等,但是首先我需要通过此阶段:)

相关 JSON 文件内容如下:

"lines" : 
[
    {"id":2011, "colour":"#00CC00", "weight":4, "opacity": 0.5, "coords":[ { "lat": 51.94036, "lng": 4.12734 },{ "lat": 54.05466, "lng": 13.78057 },{ "lat": 54.13938, "lng": 13.76870 },{ "lat": 52.40433, "lng": 13.18649 },{ "lat": 51.53493, "lng": 10.75077 },{"lat": 51.25631, "lng": 7.15687 },{ "lat": 50.45001, "lng": 5.95817 },{ "lat": 51.94036, "lng": 4.12734}]
    },
    {"id":2010, "colour":"#3399FF", "weight":4, "opacity": 0.5, "coords":[ { "lat": 51.33761, "lng": 3.18406 },{ "lat": 50.82675, "lng": 2.18220 },{ "lat": 50.70592, "lng": 2.24091 },{ "lat": 51.18277, "lng": 3.20565 },{ "lat": 50.64371, "lng": 5.55140 },{ "lat": 50.45001, "lng": 5.95817 },{ "lat": 50.33386, "lng": 6.94722 },{ "lat": 50.31374, "lng": 6.96073 },{ "lat": 45.76458, "lng": 9.05604 },{ "lat": 45.55665, "lng": 9.05278 },{ "lat": 47.75976, "lng": 7.32900 },{ "lat": 48.65055, "lng": 6.14543 },{ "lat": 51.33761, "lng": 3.18406 }]
    }
]

脚本的相关方面:

$.get('positions.json', function (data) {

            for (var i = 0, l = data.lines.length; i < l; i++) {
                var mypath = new Array();
                for (var j = 0, k = data.lines[i].coords.length; j < k; j++) {
                    var coords = data.lines[i].coords[j];
                    mypath.push(coords.lat, coords.lng);
                }

                $.goMap.createPolyline({
                    color: "#00CC00", opacity: 0.5, weight: 4, coords: mypath
                });

            }
        }, 'json');

Good afternoon, im trying to pass the coordinates for 2 separate polylines from an array, so far the array gets populated from the coordinates held in the JSON file, its just I cant seem to then use that array to actually populate the polyline coordinates, it simply doesnt appear on the map - no errors identified in console.

Im new to this so please be gentle, last night was a very late night trying to get the thing to work. Im using latest version of goMap jquery plugin, im starting to edge towards a limitation in the plugin, but knowing my lack of skills this is a stab in the dark?

Any guidance greatly appreciated. Thanks.

p.s I intend to use the other properties in the JSON file, color, id etc for each polyline, however first I need to get past this stage :)

Relevant JSON file contents as follows:

"lines" : 
[
    {"id":2011, "colour":"#00CC00", "weight":4, "opacity": 0.5, "coords":[ { "lat": 51.94036, "lng": 4.12734 },{ "lat": 54.05466, "lng": 13.78057 },{ "lat": 54.13938, "lng": 13.76870 },{ "lat": 52.40433, "lng": 13.18649 },{ "lat": 51.53493, "lng": 10.75077 },{"lat": 51.25631, "lng": 7.15687 },{ "lat": 50.45001, "lng": 5.95817 },{ "lat": 51.94036, "lng": 4.12734}]
    },
    {"id":2010, "colour":"#3399FF", "weight":4, "opacity": 0.5, "coords":[ { "lat": 51.33761, "lng": 3.18406 },{ "lat": 50.82675, "lng": 2.18220 },{ "lat": 50.70592, "lng": 2.24091 },{ "lat": 51.18277, "lng": 3.20565 },{ "lat": 50.64371, "lng": 5.55140 },{ "lat": 50.45001, "lng": 5.95817 },{ "lat": 50.33386, "lng": 6.94722 },{ "lat": 50.31374, "lng": 6.96073 },{ "lat": 45.76458, "lng": 9.05604 },{ "lat": 45.55665, "lng": 9.05278 },{ "lat": 47.75976, "lng": 7.32900 },{ "lat": 48.65055, "lng": 6.14543 },{ "lat": 51.33761, "lng": 3.18406 }]
    }
]

Relevant aspects of script:

$.get('positions.json', function (data) {

            for (var i = 0, l = data.lines.length; i < l; i++) {
                var mypath = new Array();
                for (var j = 0, k = data.lines[i].coords.length; j < k; j++) {
                    var coords = data.lines[i].coords[j];
                    mypath.push(coords.lat, coords.lng);
                }

                $.goMap.createPolyline({
                    color: "#00CC00", opacity: 0.5, weight: 4, coords: mypath
                });

            }
        }, 'json');

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

要走就滚别墨迹 2025-01-12 08:31:32

这是你的整个 json 文件吗?如果是这样,您可能需要以“{”开始文件并以“}”结束以表明它是一个 javascript 对象。

for (var j = 0, k = data.lines[i].coords.length; j < k; j++) {
                    var coords = data.lines[i].coords[j];
                    mypath.push(coords.lat, coords.lng);
                }

每次迭代中的坐标将是 {latitude:xx, longitude:yy},这是 createPolyline 期望的数组。将内部循环更改为下面的应该可以工作,尽管我还没有对此进行测试。

for (var j = 0, k = data.lines[i].coords.length; j < k; j++) {
    mypath.push(data.lines[i].coords[j]);
}

Is that your whole json file? If so you probably need to start the file with a "{" and end it with a "}" to signfy that it's a javascript object.

for (var j = 0, k = data.lines[i].coords.length; j < k; j++) {
                    var coords = data.lines[i].coords[j];
                    mypath.push(coords.lat, coords.lng);
                }

coords in each iteration will be {latitude:xx, longitude:yy}, which is what createPolyline expects an array of. Changing the inner loop to the below should work, though I haven't tested this.

for (var j = 0, k = data.lines[i].coords.length; j < k; j++) {
    mypath.push(data.lines[i].coords[j]);
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文