图概述

地图是Telerik UI for ASP。网络核心，一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

Telerik UI Map TagHelper和HtmlHelper。网络核心are server-side wrappers for the Kendo UI Map widget.

该地图显示分层组织的地理空间信息，支持桌面和移动设备。它还提供了贴图层、形状(矢量)层和标记层。

• Map HtmlHelper的演示页面

• Map TagHelper的演示页面

初始化映射

下面的示例演示如何定义Map。

@(Html.Kendo().Map() .Name("map") .Center(35.268107， -95.744821) .Zoom(2) .Layers(layers => {layers. add () .Type(MapLayerType.Tile) .UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x# /#= y# .png") . subdomain ("a"， "b"， "c") .Attribution("©OpenStreetMap贡献者");}) . markers (markers => {markers. add () . location (30.268107， -97.744821) . shape (MapMarkersShape.PinTarget) . tooltip (tooltip => tooltip.)内容(奥斯汀,得克萨斯州));}))

@{var centerCoordinates = new double[] {35.268107， -95.744821};var locationCoordinates = new double[] {30.268107， -97.744821};Var子域= new string[] {"a"， "b"， "c"};} <剑道地图name="map" center="centerCoordinates" zoom="2">          

public部分类MapController: BaseController {[Demo] public IActionResult Index() {return View();}}

基本配置

下面的示例演示Map组件的基本配置。

@(Html.Kendo().Map() .Name("map") .Center(30.268107， -97.744821) .Zoom(3) .Layers(layers => {layers. add () .Type(MapLayerType.Bing) .ImagerySet(MapLayersImagerySet.AerialWithLabels) .Key("AqaPuZWytKRUA8Nm5nqvXHWGL8BDCXvK8onCl2PkC581Zp3T_fYAQBiwIphJbRAK");}) . markers (markers => {markers. add () . location (30.268107， -97.744821) . shape (MapMarkersShape.PinTarget) . tooltip (tooltip => tooltip.)内容(奥斯汀,得克萨斯州));}))

@{var坐标= new double[] {30.268107， -97.744821};} < kendoo -map name="map" center="coordinates" zoom="3">                   

事件

有关基本Map事件的完整示例，请参阅演示使用地图的事件．

@ (Html.Kendo () . map () . name(“映射”).Layers(层= > {layers.Add () .Type (MapLayerType.Tile) .UrlTemplate (" http:// # =子域名# .tile.openstreetmap.org/ # =变焦# / # = x # # = y # . png”).Subdomains(“a”、“b”、“c”);}) . events (e => e . reset ("mapReset")))