EJS-Maps：如何沿着带有连接线的位置列表（经度、纬度）显示路线

Question

我正在 MVC .NET Core 项目上使用 EJS Maps。 我有一个包含大约 30 个位置的列表，每个位置都有经度和纬度。

我需要在 ejs 地图上显示这一系列点，并用连接这些点的线来显示。 有点像 Gmap 上的路线，但不一定要沿着道路走。

它只是为了可视化。

有人知道如何使用地图控件来实现这一点吗？

我不想在它上面覆盖一些奇怪的 js 混乱，每次地图移动一点时这些混乱都会重新加载。

有什么想法吗？

谢谢

我尝试在网上查找有关如何显示标记之间的线条的任何内容，但到目前为止找不到任何内容。我需要帮助。

Answer 1

使用导航线概念，我们的 Syncfusion Maps 组件可以显示连接标记的线。要在地图中渲染标记的导航线，请在“e-layersettings-navigationline”标签的“latitude”和“longitude”属性中将位置值指定为纬度和经度列表。请参阅下面的代码片段了解更多信息。

代码片段：

[Index.cshtml]
@{
    var latitude = new[] { 45.20963982924923, -14.9352284131176, 9.59098428152231, 61.322760583380074, -23.245005839827243 };
    var longitude = new[] { -108.83108343285129, -60.65563167966124, 19.04662953369177, 93.03887800340158, 133.72271880186048 };
    var tooltip = new MapsTooltipSettings
    {
        Visible = true,
        ValuePath = "name"
    };
}

<div>
    <ejs-maps id="maps">
       <e-maps-zoomsettings enable="true”></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer layerType="OSM" urlTemplate=http://a.tile.openstreetmap.org/level/tileX/tileY.png>
                <e-layersettings-markers>
                    <e-layersettings-marker tooltipSettings="tooltip" visible="true" animationDuration="0" dataSource="ViewBag.markerdata" height="20" width="20"></e-layersettings-marker>
                </e-layersettings-markers>
                 <e-layersettings-navigationlines>
                    <e-layersettings-navigationline visible="true" color="black" angle="0" width="2" latitude="latitude" longitude="longitude">
                    </e-layersettings-navigationline>
                </e-layersettings-navigationlines>
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>

 
[HomeController.cs]
 
public IActionResult Index()
{
   List<MarkerData> markerDataSource = new List<MarkerData>
   {
        new MarkerData { name = "Marker One",  latitude = 45.20963982924923, longitude=-108.83108343285129 },
        new MarkerData { name = "Marker Two",  latitude =  -14.9352284131176, longitude=-60.65563167966124 },
        new MarkerData { name = "Marker Three",  latitude = 9.59098428152231, longitude= 19.04662953369177 },
        new MarkerData { name = "Marker Four",  latitude =  61.322760583380074, longitude=93.03887800340158 },
        new MarkerData { name = "Marker Five",  latitude =  -23.245005839827243, longitude=133.72271880186048 },
};
ViewBag.markerdata = markerDataSource;
return View();
}

您可以从下面的链接找到演示相同内容的示例。

示例链接：https://www.syncfusion.com/downloads/support/directtrac/general/ze/MapsCoreSample1104450592

注意： 我们在上面的示例中渲染了一条导航线。您可以通过声明多个“e-layersettings-navigationline”标签来渲染多行。

请从以下链接找到进一步自定义标记和导航线的文档。

https://ej2.syncfusion.com/aspnetcore/documentation/maps/markers#customization

https://ej2.syncfusion.com/aspnetcore/documentation/maps/navigation-line#customization