我正在使用 MVC 4 开发我的 Web 项目
我正在尝试访问我的 vendor 数据以在 Google map 中标记位置。
public ActionResult GoogleMaps()
{
var dbContext = new VicoProject___NewVersion.DAL.MakeUpContext();
ViewBag.supliersContext = dbContext.Supplier.ToArray();
eturn View();
}
上面的代码在我的HomeController
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API-key">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: 32.071953, lng: 34.787868 },
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
@Html.Raw(ViewBag.HTTML)
@foreach (var c in ViewBag.supliersContext)
{
var supplierAddress = c.SupplierAddress;
var suplierName = c.SupplierName;
var supplierLat = c.SupplierLatitude;
var supplierLng = c.SupplierLongitude;
// cant use the google.maps :(:(
var marker = new google.maps.Marker({
position: google.maps.LatLng(supplierLat,supplierLng);
map: map,
title: suplierName
});
}
}
window.onload = initialize;
google.maps.event.addDomListener(window, 'load', initialize);
</script>
上面的代码位于我的 GoogleMaps View 中
我需要一些循环如何识别 google.maps
谢谢
编辑
好的，我已将循环更改为 JavaScript 循环
for (var i = 0 ; i < ViewBag.supliersContext.length ; i++) {
var supplierAddress = c.SupplierAddress;
var suplierName = c.SupplierName;
var supplierLat = c.SupplierLatitude;
var supplierLng = c.SupplierLongitude;
var marker = new google.maps.Marker({
position: google.maps.LatLng(supplierLat, supplierLng),
map: map,
title: suplierName,
})
}
但仍然没有标记:(
最佳答案
JavaScript 不是服务器端语言，因此您无法在 C# 上下文中使用它的对象。
根据您的代码，您可以使用 JavaScript 生成字符串，并使用从 Controller 检索到的值填充该字符串，类似于 @foreach 循环中的内容:
@(String.Format("new google.maps.Marker({{position: new google.maps.LatLng({0},{1}), map: map, title: {2} }});", supplierLat, supplierLng, suplierName))
基本上，每次迭代都会输出 google.maps.Marker 实例，您可以根据需要设置其格式，具体取决于您将如何使用它。
更新:
这是一个working example .
服务器端:
public class Supplier
{
public string SupplierName { get; set; }
public decimal SupplierLatitude { get; set; }
public decimal SupplierLongitude { get; set; }
}
[HttpGet]
public ActionResult Index()
{
ViewBag.supliersContext = new List<Supplier>()
{
new Supplier() { SupplierName = "Test1", SupplierLatitude = 32.071953M, SupplierLongitude = 34.787868M },
new Supplier() { SupplierName = "Test2", SupplierLatitude = 31.571953M, SupplierLongitude = 34.787868M },
new Supplier() { SupplierName = "Test3", SupplierLatitude = 31.071953M, SupplierLongitude = 34.787868M },
};
return View();
}
客户端:
<html lang="en">
<body>
<div id="map-canvas" style="height: 400px;"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: 32.071953, lng: 34.787868 },
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
@foreach (var c in ViewBag.supliersContext)
{
var suplierName = c.SupplierName;
var supplierLat = c.SupplierLatitude;
var supplierLng = c.SupplierLongitude;
@Html.Raw(String.Format("new google.maps.Marker({{position: new google.maps.LatLng({0},{1}), map: map, title: '{2}'}});", supplierLat, supplierLng, suplierName))
}
}
window.onload = initialize;
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
这只是一个测试示例，您不应该立即使用它，因为 @Html.Raw 显示 XSS在这种情况下的脆弱性。
关于javascript - 如何在 C# 代码中使用 javaScript 库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26235159/