EPR类企业管理系统

在我们现有系统基础上或全新开发,提供定制服务
为您的企业高效快速实施ERP,WMS,MES,CRM管理系统
全面管控物料仓库、销售业务、采购业务、仓库业务
生产过程、质量检验、组织架构、业务报表


定制
QQ:460-3528

开发
QQ群:3360-90194

源码
微信:136-3650-3721

如何:使用Google Maps API在地图上绘制线

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

  • 面向ASP.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);
        }
    }
    

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

    Maps_Polyline

  • 面向移动的控制器

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

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

    Maps_Polyline_Mobile

相关文章

转载保留此链接,注明出处