google-maps - MVC 4 和谷歌地图 API v3

Question

我正在将 Google Maps 合并到我的 MVC 4 应用程序中。做起来相当简单。但是，我有一个关于动态添加多个标记的最佳方法的问题。我的用户将通过调用 Controller 上的操作方法来搜索待售商品列表，并且我希望能够向他们展示商品以及每个商品在 map 上的位置。我不确定如何或最好的方式将标记动态添加到 map 中，这是客户端中的所有 JavaScript。本质上，我希望能够将所有标记信息从 MVC 服务器代码发送到客户端，但不确定是否可以或应该这样做。

Answer 1

在我现在正在做的项目中，我们是这样处理的:

让主 ViewModel 被称为 FooViewModel .

View 模型:

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

在 View 中，有一个 <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:

初始化 map ，添加标记并将它们存储在 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...
            });
        });
    }
}

这种方法的好处是，一切都在初始化你的谷歌地图的函数中完成。因此，您的脚本不必嵌入到您的 View 中。我们正在使用 HTML5 友好的方法。这很简单。