Question

我正在使用MVC 4

处理我的网络项目

我试图访问我的供应商数据以在Google地图中标记位置。

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查看中

我需要一些我循环将如何识别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,
    })
 }

但仍然没有标记:(

Answer 1

JavaScript不是服务器端语言，因此您无法在C＃上下文中使用其对象。

根据您的代码，您可以使用JavaScript生成字符串，并使用从控制器检索到的值填充该字符串，类似于@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漏洞。

如何在c＃代码中使用javaScript库

1 个答案: