时间戳

首页 > 解决方案 > 如何在 Syncfusion Blazor 中以全宽和自动高度显示整个世界地图？

c# - 如何在 Syncfusion Blazor 中以全宽和自动高度显示整个世界地图？

问题描述

我正在尝试创建一个应用程序来在地图上显示某些项目。此地图中的这个世界只需要在屏幕的整个宽度上显示一次，因此高度是自动确定的。

我现在得到的：

在此处输入图像描述

正如您在此处看到的，地图全宽显示，但世界在此显示了 3 次。我希望它只显示一次，高度会自动增加以缩放..我怎样才能做到这一点？

代码：

<div class="row">
        <div class="col-lg-12 col-md-12" style="margin-bottom:50px;">
            <SfCard ID="">
                <CardHeader Title="locations" />
                <CardContent>
                    <SfMaps>
                        @* To zoom and pan *@
                        <MapsZoomSettings Enable="true"
                                          Toolbars='new string[]{"Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset" }'>
                        </MapsZoomSettings>
                        <MapsLayers>
                            <MapsLayer LayerType="ShapeLayerType.OSM" >
                            </MapsLayer>
                        </MapsLayers>
                    </SfMaps>
                </CardContent>
            </SfCard>
        </div>
</div>

标签： c#mapsopenstreetmapblazorsyncfusion

解决方案

我们已经分析了提供的图像，并了解到您正在尝试根据卡片组件大小来渲染地图。我们已经处理了具有特定高度和宽度的 OSM 地图。因此，地图会在控件的额外空间中重复，并且地图特征（如标记和导航线）将添加到中心地图中。但是，我们可以使用 ZoomFactor 属性在中心缩放地图。我们创建了一个示例来演示相同的内容，可以从以下链接下载它。

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1_(6)1787155629

在上面的示例中，我们在地图的“MapsZoomSettings”中使用“ZoomFactor”属性渲染了 OSM 地图。

请让我们知道上述样品符合您的要求。如果没有，请向我们提供有关您的要求的更多详细信息。这将有助于我们进一步分析并更好地为您提供帮助。

问候， Swetha Babu

推荐阅读