本示例演示如何在根据“使用栅格地图”教程创建的Mobile或ASP.NET应用程序中使用Google Maps API绘制连接地图标记的线。

• 面向ASP.NET的控制器

  • 将WebPolylineController视图控制器添加到ASP.NET模块项目中。
  • 在构造函数中，将ViewController.TargetObjectType属性设置为IMapsMarker，将ViewController.TargetViewType设置为ViewType.ListView。
  • 重写OnViewControlsCreated方法，并访问WebMapsListEditor列表编辑器及其MapViewer控件。此控件公开MapViewer.ClientSideEvents属性，该属性使您可以将JavaScript处理程序分配给客户端事件。
  • 处理MapViewerClientSideEvents.Customize客户端事件，并绘制一条连接显示的标记的多边形线。
  • 要访问标记列表，请使用ListView.CollectionSource的CollectionSourceBase.List属性。
  • C＃
  • VB.NET

  using DevExpress.Persistent.Base;
  using DevExpress.ExpressApp.Maps.Web;
  using System.Web.Script.Serialization;
  using DevExpress.ExpressApp.Maps.Web.Helpers;
  // ...
  public class WebPolylineController : ViewController<ListView> {
      public WebPolylineController() {
          TargetObjectType = typeof(IMapsMarker);
      }
      protected override void OnViewControlsCreated() {
          base.OnViewControlsCreated();
  
          WebMapsListEditor webMapsListEditor = ((ListView)View).Editor as WebMapsListEditor;
          if (webMapsListEditor != null)
              webMapsListEditor.MapViewer.ClientSideEvents.Customize = GetCustomizeScript();
      }
      private IEnumerable<MapPoint> GetPolylinePoints() {
          List<MapPoint> polylinePoints = new List<MapPoint>();
          foreach (IMapsMarker marker in View.CollectionSource.List) {
              polylinePoints.Add(new MapPoint(marker.Latitude, marker.Longitude));
          }
          return polylinePoints;
      }
      private string GetCustomizeScript() {
          var jsSerializer = new JavaScriptSerializer();
          string polylines = jsSerializer.Serialize(GetPolylinePoints());
          return string.Format(
  @"function(sender, map) {{
      map.on('ready', function(e) {{
          var googleMap = e.originalMap;
          var flightPlanCoordinates = {0};
          var flightPath = new google.maps.Polyline({{
          path: flightPlanCoordinates,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
          }});
  
          flightPath.setMap(googleMap);
      }});
  }}", polylines);
      }
  }
  

  运行该应用程序并创建几个标记。结果显示在下图中。

  

• 面向移动的控制器

  • 将MobilePolylineController View Controller添加到Mobile模块项目中。
  • 在构造函数中，将ViewController.TargetViewId属性设置为MapsMarker_ListView。
  • 重写OnViewControlsCreated方法，并访问MobileMapsListEditor列表编辑器及其Map控件。此控件公开Map.OnCustomize属性，该属性允许您分配JavaScript代码以绘制连接指定地图点的多边形线。请注意，JavaScript代码应放在方括号中。
  • C＃
  • VB.NET

  using DevExpress.ExpressApp;
  using DevExpress.ExpressApp.Maps.Mobile;
  using DevExpress.ExpressApp.Maps.Mobile.Editors;
  using DevExpress.ExpressApp.Maps.Mobile.Helpers;
  using Newtonsoft.Json;
  using System.Collections.Generic;
  //...
  public class MobilePolylineController : ViewController<ListView> {
      public MobilePolylineController() {
          TargetViewId = "MapsMarker_ListView";
      }
      protected override void OnViewControlsCreated() {
          base.OnViewControlsCreated();
          MobileMapsListEditor mobileMapsListEditor = View.Editor as MobileMapsListEditor;
          if (mobileMapsListEditor != null) {
              Map map = mobileMapsListEditor.Control as Map;
              map.OnCustomize = GetCustomizeScript();
          }
      }
      private IEnumerable<MapPoint> GetPolylinePoints() {
          List<MapPoint> polylinePoints = new List<MapPoint>();
          polylinePoints.Add(new MapPoint(40.7, -74));
          polylinePoints.Add(new MapPoint(50.3, 0.7));
          return polylinePoints;
      }
      private string GetCustomizeScript() {
          var polylines = JsonConvert.SerializeObject(GetPolylinePoints());
          return string.Format(
              @"(function(mapInstance) {{
                  mapInstance.on('ready', function(e) {{
                  var googleMap = e.originalMap;
                  var flightPlanCoordinates = {0};
                  var flightPath = new google.maps.Polyline({{
                      path: flightPlanCoordinates,
                      strokeColor: '#0000FF',
                      strokeOpacity: 1.0,
                      strokeWeight: 2
                  }});
                  window.flightPath = flightPath;
                  flightPath.setMap(googleMap);
              }});
          }})", polylines);
      }
  }
  

  运行应用程序。结果显示在下图中。