如何在 MVC 应用程序中设置剑道地图边界？答案

【问题标题】：How to set Kendo Map boundaries in MVC app?如何在 MVC 应用程序中设置剑道地图边界？
【发布时间】：2015-04-06 20:52:04
【问题描述】：

我正在使用 Telerik 的地图控件，带有 shome 标记：

@(Html.Kendo().Map()
  .Name("map")
  .Layers(layers =>
  {
      layers.Add()
          .Type(MapLayerType.Tile)
          .UrlTemplate("http://tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
          .Subdomains("a", "b", "c")
          .Attribution("&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." +
                       "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>");

      layers.Add()
          .Type(MapLayerType.Marker)
          .DataSource(dataSource => dataSource.GeoJson()
              .Read(read => read.Action("GetMarkers", "MyController"))
          )
          .Tooltip(t => t.ContentHandler("GetTooltipContent"))
          .LocationField("LatLng")
          .TitleField("Title");
  }).Events(e => e.MarkerClick("MarkerClicked")))

我需要所有标记都适合初始地图视图，并具有正确的缩放和中心位置。

我使用了谷歌地图的 gmaps javascript 插件，我知道有 fitZoom()/fitBounds() 函数可以实现这一点

有没有什么方法可以通过 Kendo 控件实现这一点？

【问题讨论】：

标签： c# asp.net-mvc kendo-ui telerik openstreetmap

【解决方案1】：

使用 jQuery 可以为地图设置边界。

   function createMap() {
          var markers = [
    {"latlng":[34.2675,38.7409], "name": "One"},
    {"latlng": [30.2707,-97.7490],"name": "Two"},
    {"latlng": [30.2705,-90.4444],"name": "Three"},
    {"latlng": [31.8520,33.8911], "name": "Four"}];

    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "http://tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"],
            attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." +
                                                       "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>"
        }, {
            type: "marker",
            dataSource: {
                data: markers
            },
            locationField: "latlng",
            titleField: "name"
        }]
    });

   
        var map = $("#map").getKendoMap();
        var layer = map.layers[1];
        var markers = layer.items;
        var extent;

        for (var i = 0; i < markers.length; i++) {
            var loc = markers[i].location();

            if (!extent) {
                extent = new kendo.dataviz.map.Extent(loc, loc);
            } else {
                extent.include(loc);
            }
        }

        map.extent(extent);
    }

 

    $(document).ready(createMap);

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/map/index">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section k-header" style="padding: 1em;">
        <div id="map"></div>
    </div>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

我在 asp.net mvc5 应用程序中通过 ajax 调用做到了这一点

控制器

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult GetMarkers( )
        {
            var listMarkers = new List<Markers>() { new Markers() { Latitude=34.2675, Longitude= 38.7409, Name="Pos1"},
             new Markers() { Latitude=30.2707, Longitude=-97.7490, Name="Pos2"},
             new Markers() { Latitude=30.2705, Longitude=-90.4444, Name="Pos3"},
             new Markers() { Latitude=31.8520, Longitude=33.8911, Name="Pos4"},
             new Markers() { Latitude=33.8520, Longitude=32.8911, Name="Pos5"},
             new Markers() { Latitude=60.2707, Longitude=-97.7490, Name="Pos6"},
             new Markers() { Latitude=20.2705, Longitude=-90.4444, Name="Pos7"},
             new Markers() { Latitude=50.8520, Longitude=33.8911, Name="Pos8"},
             new Markers() { Latitude=40.8520, Longitude=32.8911, Name="Pos9"}};
            var json = JsonConvert.SerializeObject(listMarkers);
            return Json(json, JsonRequestBehavior.AllowGet);

        }
    }

模型：

public class Markers
    {
        public string Name { get; set; }
        public double Latitude { get; set; }
        public double Longitude { get; set; }

        public double[] LatLong {  get { return   new double[] { Latitude , Longitude}; } }
    }

和视图

<ul id="panelbar">
    <li class="k-state-active">
        <span class="k-link k-state-selected">Getting Started</span>
        <div id="map" style="width: 960px; height: 600px"></div>
    </li>
    <li>

    </li>
</ul>
<script>

    $(function () {
        var markers;
            $.ajax({
                url: "../Home/GetMarkers",
                dataType: 'json',
                async: false,
                success: function (data) {
                    markers = data;             
                }
            });

            $("#panelbar").kendoPanelBar();
            $("#map").kendoMap({
                layers: [{
                    type: "tile",
                    urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
                    attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>."
                }, {
                    type: "marker",
                    dataSource: {
                        data: JSON.parse(markers)
                    },
                    locationField: "LatLong",
                    titleField: "Name"
                }]
            });
    });

</script>

【讨论】：