MVC 4和Google Maps API v3

Question

我将谷歌地图纳入我的MVC 4应用程序.相当简单易行.但是,我有一个关于动态添加多个标记的最佳方法的问题.我的用户将通过调用控制器上的操作方法来搜索待售商品列表,并且我希望能够在地图上向他们显示每个项目和位置.我不确定的是如何或最好的方法,将标记动态添加到地图,这是客户端中的所有JavaScript.基本上我希望能够将所有标记信息从MVC服务器代码发送到客户端,但不确定它是否可以或应该以这种方式完成.

Answer 1

在我正在进行的项目中,这就是我们处理它的方式:

让主ViewModel被调用FooViewModel.

的ViewModels:

public class FooViewModel
{
    // Your search results:
    public IEnumerable<FooWithLocationViewModel> Foos { get; set; }

    // Properties for your search filter:
    public decimal? MaxPrice { get; set; }
    public CityEnum? City { get; set; }
    ... 
}

public class FooWithLocationViewModel
{
    public string Name { get; set; }
    public decimal Price { get; set; }
    ...
    public double Latidude { get; set; }
    public double Longitude { get; set; }
    ...
}

在视图中,<div>每个都有一个FooWithLocationViewModel.我们将使用data-*HTML5中有效的属性:

视图:

@model FooViewModel

...

@foreach(FooWithLocationViewModel foo in Model.Foos)
{
    <div class="foo" data-latitude="@(foo.Latitude)" 
        data-longitude="@(foo.Longitude)">
        <span>@foo.Name</span>
        <span>@foo.Price</span>
        ...
    </div>
}

<div id="map-canvas"></div>

现在,是时候进行JavaScript了,我假设您正在使用JQuery:

初始化地图,添加标记并将其存储在markers数组中:

function initialize() {
    var foos = $(".foo");
    var markers = new Array();
    var mapOptions = {
       ...
    }};
    var mapCanvas = document.getElementById('map-canvas');
    if (mapCanvas != null) {
        map = new google.maps.Map(mapCanvas, mapOptions);

        $.each(foos, function (key, value) {
            markers[key] = new google.maps.Marker({
              map: map,
              draggable: false,
              animation: google.maps.Animation.DROP,
              position: new google.maps.LatLng(
                  Number($(value).attr("data-latitude")), 
                  Number($(value).attr("data-longitude")
               ));
            });

            google.maps.event.addListener(markers[key], 'click', function () {
                // If you need this...
            });
        });
    }
}

这种方法有什么好处,一切都在初始化Google Map的功能中完成.因此,您的脚本不必嵌入到View中.我们正在使用HTML5友好的方法.这很简单.