如何使用kendo在MVC中的多个标记之间绘制路径

本文介绍了如何使用kendo在MVC中的多个标记之间绘制路径的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 一般将Line绘制到标记位置，但我想如何在MVC之间使用kendo绘制 多个标记之间的路径 行到标记位置源代码： Map.cshtml ： < ！DOCTYPE html > < html > < head > < meta charset = utf-8 / > < 标题 > Kendo UI代码段< / title > < link rel = 样式表 href = https://kendo.cdn.telerik.com/2018.2 .620 / styles / kendo.common.min.css / > < link rel = stylesheet href = https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css / > < 链接 rel = stylesheet href = https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css / > < link rel = 样式表 href = https://kendo.cdn.telerik.com/2018.2.620/styles /kendo.mobile.all.min.css\" / > < script src = https://code.jquery.com/ jquery-1.12.4.min.js > < / script > < script src = https://kendo.cdn.telerik.com/2018.2.620/ js / kendo.all.min.js > < / script > < / head > < body > < div id = map > < / div > < script > $（ #map）。kendoMap（ { center：[ 18 。 89 ， - 72。 19 ]，缩放： 5 ，图层：[{类型： shape， dataSource：{ type： geojson， transport：{ read： http://output.jsbin.com/zuguhajiye.js } } }，{类型： marker， dataSource：{ data：[{ location ：[ 20 。 69 ， - 70。 96 ]， title： Foo， pointTo：[ 18 。 89 ， - 72。 19 ] }]， locationField： location， titleField： title } }]，重置： function （e）{ var map = e.sender; var markers = map.layers [ 1 ]。items; for （ var i = 0 ; i< markers.length; i ++）{ linkMarker（map，markers [i]）; } } }）; function linkMarker（map，marker）{ var 数据= marker.dataItem; if （data.pointTo）{ // 将纬度/长度位置转换为屏幕上的坐标 // 参见：http：//docs.telerik.com/kendo-ui/api/dataviz/map#methods-eventToView var from = map .locationToView（marker。 location （））; var to = map.locationToView（data.pointTo）; // 在形状图层上绘制路径 // 请参阅：http：//docs.telerik.com/kendo-ui/api/dataviz/drawing/path // http://docs.telerik.com/kendo-ui/getting-started/ dataviz / drawing / basic-shapes var shapeLayer = map.layers [ 0 ]; var line = new kendo.dataviz.drawing.Path（{ stroke ：{ color： #aaa， width： 4 ， lineCap： round } }）; line.moveTo（from）.lineTo（to）; shapeLayer.surface.draw（line）; } } < / script > < / body > < / html > 最后我需要使用剑道在MVC中的多个标记之间绘制路线。 请帮帮我。 谢谢你。 我的尝试： 一般来说将线绘制到标记位置但我想如何使用kendo 解决方案 > （ #map）。kendoMap（{ center：[ 18 。 89 ， - 72。 19 ]， zoom： 5 ， layers：[{ type： shape， dataSource：{ type： geojson， transport：{ read： http://output.jsbin.com/zuguhajiye.js } } }，{类型： marker， dataSource：{ data：[{ location ：[ 20 。 69 ， - 70。 96 ]， title： Foo， pointTo：[ 18 。 89 ， - 72。 19 ] }]， locationField： location， titleField： title } }]，重置： function （e ）{ var map = e.sender; var markers = map.layers [ 1 ]。items; for （ var i = 0 ; i< markers.length; i ++）{ linkMarker（map，markers [i]）; } } }）; function linkMarker（map，marker）{ var 数据= marker.dataItem; if （data.pointTo）{ // 将纬度/长度位置转换为屏幕上的坐标 // 参见：http：//docs.telerik.com/kendo-ui/api/dataviz/map#methods-eventToView var from = map .locationToView（marker。 location （））; var to = map.locationToView（data.pointTo）; // 在形状图层上绘制路径 // 请参阅：http：//docs.telerik.com/kendo-ui/api/dataviz/drawing/path // http://docs.telerik.com/kendo-ui/getting-started/ dataviz / drawing / basic-shapes var shapeLayer = map.layers [ 0 ]; var line = new kendo.dataviz.drawing.Path（{ stroke ：{ color： #aaa， width： 4 ， lineCap： round } }）; line.moveTo（from）.lineTo（to）; shapeLayer.surface.draw（line）; } } < / script > < / body > < / html > 最后我需要使用剑道在MVC中的多个标记之间绘制路线。 请帮帮我。 谢谢你。 我的尝试： 一般来说将线绘制到标记位置，但我想如何在MVC之间使用kendo在 多个标记之间绘制路径 你只需要一个以上的点就可以了 - 否则没有路线... 数据：[{ location ：[ 20 。 69 ， - 70. 96 ]， title： Foo }， { location ：[ 22 . 69 ， - 77。 96 ]， title： Next Foo }， { location ：[ 12 。 69 ， - 67。 96 ]， title： Next Next Foo }]， 如果你想画两点之间的线，你必须传递两个点（标记）到绘图方法...所以运行你的循环到一个前一个元素.. 。 for （ var i = 0 ;我< markers.length - 1 ; i ++）{ linkMarker（map，markers [i]，markers [i + 1 ]）; } 和绘图功能： function linkMarker（map，marker，nextMarker）{ var data = marker.dataItem; var nextData = nextMarker.dataItem; var dataFrom = map.locationToView（marker。 location （））; var nextDataFrom = map.locationToView（nextMarker。 location （））; var shapeLayer = map.layers [ 0 ]; var line = new kendo.dataviz.drawing.Path（{ stroke ：{ color： #aaa， width： 4 ， lineCap： round } }）; line.moveTo（dataFrom）.lineTo（nextDataFrom）; shapeLayer.surface.draw（line）; } Generally draw the Line to marker location but i want to how to draw route between multiple markers in MVC using kendoLine to marker location source code:Map.cshtml:<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>Kendo UI Snippet</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css"/> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css"/> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script></head><body> <div id="map"></div> <script> $("#map").kendoMap({ center: [18.89, -72.19], zoom: 5, layers: [{ type: "shape", dataSource: { type: "geojson", transport: { read: "http://output.jsbin.com/zuguhajiye.js" } } }, { type: "marker", dataSource: { data: [{ location: [20.69, -70.96], title: "Foo", pointTo: [18.89, -72.19] }], locationField: "location", titleField: "title" } }], reset: function(e) { var map = e.sender; var markers = map.layers[1].items; for (var i = 0; i < markers.length; i++) { linkMarker(map, markers[i]); } } }); function linkMarker(map, marker) { var data = marker.dataItem; if (data.pointTo) { // Convert lat/long locations to coordinates on the screen // See: http://docs.telerik.com/kendo-ui/api/dataviz/map#methods-eventToView var from = map.locationToView(marker.location()); var to = map.locationToView(data.pointTo); // Draw a path on the shape layer // See: http://docs.telerik.com/kendo-ui/api/dataviz/drawing/path // http://docs.telerik.com/kendo-ui/getting-started/dataviz/drawing/basic-shapes var shapeLayer = map.layers[0]; var line = new kendo.dataviz.drawing.Path({ stroke: { color: "#aaa", width: 4, lineCap: "round" } }); line.moveTo(from).lineTo(to); shapeLayer.surface.draw(line); } } </script></body></html>Finally i need draw route between multiple markers in MVC using kendo.please help me.thank u.What I have tried:Generally draw the Line to marker location but i want to how to draw route between multiple markers in MVC using kendo 解决方案 ("#map").kendoMap({ center: [18.89, -72.19], zoom: 5, layers: [{ type: "shape", dataSource: { type: "geojson", transport: { read: "http://output.jsbin.com/zuguhajiye.js" } } }, { type: "marker", dataSource: { data: [{ location: [20.69, -70.96], title: "Foo", pointTo: [18.89, -72.19] }], locationField: "location", titleField: "title" } }], reset: function(e) { var map = e.sender; var markers = map.layers[1].items; for (var i = 0; i < markers.length; i++) { linkMarker(map, markers[i]); } } }); function linkMarker(map, marker) { var data = marker.dataItem; if (data.pointTo) { // Convert lat/long locations to coordinates on the screen // See: http://docs.telerik.com/kendo-ui/api/dataviz/map#methods-eventToView var from = map.locationToView(marker.location()); var to = map.locationToView(data.pointTo); // Draw a path on the shape layer // See: http://docs.telerik.com/kendo-ui/api/dataviz/drawing/path // http://docs.telerik.com/kendo-ui/getting-started/dataviz/drawing/basic-shapes var shapeLayer = map.layers[0]; var line = new kendo.dataviz.drawing.Path({ stroke: { color: "#aaa", width: 4, lineCap: "round" } }); line.moveTo(from).lineTo(to); shapeLayer.surface.draw(line); } } </script></body></html>Finally i need draw route between multiple markers in MVC using kendo.please help me.thank u.What I have tried:Generally draw the Line to marker location but i want to how to draw route between multiple markers in MVC using kendoFirst of all you need more than one point to work with - otherwise there is no route...data: [{ location: [20.69, -70.96], title: "Foo"},{ location: [22.69, -77.96], title: "Next Foo"},{ location: [12.69, -67.96], title: "Next Next Foo"}],If you want to draw a line between two point you have to pass two points (markers) to the drawing method... So run your loop up to one-before-the-last elements...for (var i = 0; i < markers.length - 1; i++) {linkMarker(map, markers[i], markers[i + 1]);}And the drawing function:function linkMarker(map, marker, nextMarker) {var data = marker.dataItem;var nextData = nextMarker.dataItem;var dataFrom = map.locationToView(marker.location());var nextDataFrom = map.locationToView(nextMarker.location());var shapeLayer = map.layers[0];var line = new kendo.dataviz.drawing.Path({stroke: { color: "#aaa", width: 4, lineCap: "round"}}); line.moveTo(dataFrom).lineTo(nextDataFrom);shapeLayer.surface.draw(line);} 这篇关于如何使用kendo在MVC中的多个标记之间绘制路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！