本主题描述如何在根据“使用栅格地图”教程创建的应用程序中使用JavaScript代码直接访问dxMap小部件。如果您需要自定义未映射到“模型编辑器”中IModelMapSettings或IModelMobileMapSettings节点的属性的窗口小部件选项，则可能需要执行此操作。在此示例中，使用人类可读地址（而非数字坐标）自定义指定在小部件中心显示的位置的中心选项。在其autoAdjust选项也发生了变化。

• 面向ASP.NET的控制器

  • 将WebMapCenterController视图控制器添加到ASP.NET模块项目中。
  • 在构造函数中，将ViewController.TargetObjectType属性设置为IMapsMarker，将ViewController.TargetViewType设置为ViewType.ListView。
  • 重写OnViewControlsCreated方法，并访问WebMapsListEditor列表编辑器及其MapViewer控件。此控件公开MapViewer.ClientSideEvents属性，该属性使您可以将JavaScript处理程序分配给客户端事件。
  • 处理MapViewerClientSideEvents.Customize客户端事件以更改center和autoAdjust选项。
  • C＃
  • VB.NET

  using DevExpress.Persistent.Base;
  using DevExpress.ExpressApp.Maps.Web;
  // ...
  public class WebMapCenterController : ViewController {
      public WebMapCenterController() {
          TargetObjectType = typeof(IMapsMarker);
          TargetViewType = ViewType.ListView;
      }
      protected override void OnViewControlsCreated() {
          base.OnViewControlsCreated();
          WebMapsListEditor mapsListEditor = ((ListView)View).Editor as WebMapsListEditor;
          if (mapsListEditor != null) {
              mapsListEditor.MapViewer.ClientSideEvents.Customize = @"
  function(sender, map) {
      map.option('center', 'Brooklyn Bridge, New York, NY');
      map.option('autoAdjust', false);
  }";
          }
      }
  }
  

  结果显示在下图中。

  

• 面向移动的控制器

  • 将MobileMapCenterController视图控制器添加到Mobile模块项目中。
  • 在构造函数中，例如，将ViewController.TargetViewId属性设置为MapsMarker_ListView。
  • 重写OnViewControlsCreated方法，并访问MobileMapsListEditor列表编辑器及其Map控件。
  • 用字符串指定控件的Map.OnCustomize属性，该字符串是JavaScript客户端事件，用于更改center和autoAdjust选项。请注意，JavaScript代码应放在方括号中。
  • C＃
  • VB.NET

  using DevExpress.ExpressApp;
  using DevExpress.ExpressApp.Maps.Mobile;
  using DevExpress.ExpressApp.Maps.Mobile.Editors;
  //...
  public class MobileMapCenterController : ViewController<ListView> {
      public MobileMapCenterController() {
          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 = @"
              (function(map) {
                  map.option('center', 'Brooklyn Bridge,New York,NY');
                  map.option('autoAdjust', 'false');
              })";
          }
      }
  }
  

  结果显示在下图中。