如何在 MVC 应用程序中设置 Kendo 地图边界?
How to set Kendo Map boundaries in MVC app?
我正在使用 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("© <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")))
我需要所有标记都适合初始地图视图,并具有正确的缩放和中心位置。
我已经为 google 地图使用了 gmaps javascript 插件,我知道有函数 fitZoom()/fitBounds() 可以实现这个
有什么方法可以通过 Kendo 控件来实现吗?
使用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: "© <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 应用程序
中通过 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: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>."
}, {
type: "marker",
dataSource: {
data: JSON.parse(markers)
},
locationField: "LatLong",
titleField: "Name"
}]
});
});
</script>
我正在使用 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("© <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")))
我需要所有标记都适合初始地图视图,并具有正确的缩放和中心位置。
我已经为 google 地图使用了 gmaps javascript 插件,我知道有函数 fitZoom()/fitBounds() 可以实现这个
有什么方法可以通过 Kendo 控件来实现吗?
使用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: "© <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 应用程序
中通过 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: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>."
}, {
type: "marker",
dataSource: {
data: JSON.parse(markers)
},
locationField: "LatLong",
titleField: "Name"
}]
});
});
</script>