地图事件

本文解释了用于Blazor的Telerik Map的可用事件:

• OnClick
• OnMarkerClick
• OnShapeClick

OnClick

的OnClick事件在用户单击地图时触发。它的EventCallback < MapClickEventArgs >给:

• MapClickEventArgs。EventArgs-提供本机DOM事件(浏览器事件)。
• MapClickEventArgs。位置-提供点击在地图上的位置(MapLocation有纬度而且经度道具)。

这段代码展示了如何处理OnClick事件的例子。*@     < maplayerbubblesesettingings >< MapLayerBubbleSettingsStyle>    < MapLayer Type="@MapLayersType. "标记" Data="@MarkerData1" LocationField="@nameof(MarkerModel.LatLng)"TitleField = " @nameof (MarkerModel.Title)">    @EventResult @code {public string[] Subdomains {get;设置;} = new string[] {"a"， "b"， "c"};公共字符串UrlTemplate {get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"; public string Attribution { get; set; } = "© OpenStreetMap contributors"; public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 }; public string EventResult { get; set; } public List MarkerData1 { get; set; } = new List() { new MarkerModel() { LatLng = new double[] { 30.268107, -97.744821 }, Title = "Austin, TX" } }; public List BubbleData { get; set; } = new List() { new BubbleModel() { LatLng = new double[] { 37.7749, -122.4194 }, Revenue = 1000 }, new BubbleModel() { LatLng = new double[] { 41.8781, -87.6298 }, Revenue = 200 } }; public void OnMapClick(MapClickEventArgs args) { var location = args.Location; var eventArgs = args.EventArgs as MouseEventArgs; LogToConsole( $"map click: location = [{location.Latitude}, {location.Longitude}]," + $"clientX = {eventArgs.ClientX}, clientY = {eventArgs.ClientY}"); } public void LogToConsole(string text) { EventResult = text; } public class MarkerModel { public double[] LatLng { get; set; } public string Title { get; set; } } public class BubbleModel { public double[] LatLng { get; set; } public int Revenue { get; set; } } }

OnMarkerClick

的OnMarkerClick事件在用户单击标记时触发。它的EventCallback < MapMarkerClickEventArgs >给:

• MapMarkerClickEventArgs。DataItem-提供绑定标记的数据项(对象)。
• MapMarkerClickEventArgs。EventArgs-提供本机DOM事件(浏览器事件)。

这段代码展示了如何处理OnMarkerClick事件的示例。*@     < maplayerbubblesesettingings >< MapLayerBubbleSettingsStyle>    < MapLayer Type="@MapLayersType. "标记" Data="@MarkerData1" LocationField="@nameof(MarkerModel.LatLng)"TitleField = " @nameof (MarkerModel.Title)">    @EventResult @code {public string[] Subdomains {get;设置;} = new string[] {"a"， "b"， "c"};公共字符串UrlTemplate {get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"; public string Attribution { get; set; } = "© OpenStreetMap contributors"; public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 }; public string EventResult { get; set; } public List MarkerData1 { get; set; } = new List() { new MarkerModel() { LatLng = new double[] { 30.268107, -97.744821 }, Title = "Austin, TX" } }; public List BubbleData { get; set; } = new List() { new BubbleModel() { LatLng = new double[] { 37.7749, -122.4194 }, Revenue = 1000 }, new BubbleModel() { LatLng = new double[] { 41.8781, -87.6298 }, Revenue = 200 } }; public void OnMarkerClick(MapMarkerClickEventArgs args) { var dataItem = args.DataItem as MarkerModel; var eventArgs = args.EventArgs as MouseEventArgs; LogToConsole( $"marker click: title = {dataItem.Title}, location = [{string.Join(",", dataItem.LatLng)}]," + $"clientX = {eventArgs.ClientX}, clientY = {eventArgs.ClientY}"); } public void LogToConsole(string text) { EventResult = text; } public class MarkerModel { public double[] LatLng { get; set; } public string Title { get; set; } } public class BubbleModel { public double[] LatLng { get; set; } public int Revenue { get; set; } } }

OnShapeClick

的OnShapeClick事件在用户单击形状时触发。它的EventCallback < MapShapeClickEventArgs >给:

• MapShapeClickEventArgs。DataItem-当形状来自气泡层时提供数据项(形状层为null)。
• MapShapeClickEventArgs。GeoJsonDataItem-当该层是形状层时，以GeoJSON(字典)的形式提供数据项(气泡层为null)。
• MapShapeClickEventArgs。EventArgs-提供本机DOM事件(浏览器事件)。

这段代码展示了如何处理OnShapeClick事件的示例。*@     < maplayerbubblesesettingings >< MapLayerBubbleSettingsStyle>    < MapLayer Type="@MapLayersType. "标记" Data="@MarkerData1" LocationField="@nameof(MarkerModel.LatLng)"TitleField = " @nameof (MarkerModel.Title)">    @EventResult @code {public string[] Subdomains {get;设置;} = new string[] {"a"， "b"， "c"};公共字符串UrlTemplate {get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"; public string Attribution { get; set; } = "© OpenStreetMap contributors"; public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 }; public string EventResult { get; set; } public List MarkerData1 { get; set; } = new List() { new MarkerModel() { LatLng = new double[] { 30.268107, -97.744821 }, Title = "Austin, TX" } }; public List BubbleData { get; set; } = new List() { new BubbleModel() { LatLng = new double[] { 37.7749, -122.4194 }, Revenue = 1000 }, new BubbleModel() { LatLng = new double[] { 41.8781, -87.6298 }, Revenue = 200 } }; public void OnShapeClick(MapShapeClickEventArgs args) { var dataItem = args.DataItem as BubbleModel; var eventArgs = args.EventArgs as MouseEventArgs; LogToConsole( $"shape click: revenue = {dataItem.Revenue}, location = [{string.Join(",", dataItem.LatLng)}]," + $"clientX = {eventArgs.ClientX}, clientY = {eventArgs.ClientY}"); } public void LogToConsole(string text) { EventResult = text; } public class MarkerModel { public double[] LatLng { get; set; } public string Title { get; set; } } public class BubbleModel { public double[] LatLng { get; set; } public int Revenue { get; set; } } }