如何在MVC应用程序中设置Kendo地图边界？

问题描述：

我使用Telerik的从一个地图控制，具有SHOME标记：如何在MVC应用程序中设置Kendo地图边界？

@(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")))

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

我已经使用了JavaScript的gmaps插件谷歌地图，我知道有功能fitZoom（）/ fitBounds（）来实现这一

有什么办法与剑道控件来实现这一目标？

答

使用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>

答

我这样做，在一个asp.net应用mvc5

控制器

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); 

     } 
    }

模型中的AJAX调用：

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}; } } 
    }

and the view

<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>

如何在MVC应用程序中设置Kendo地图边界？

相关推荐