MVC 4和谷歌地图API第3版 [英] MVC 4 and Google Maps API v3

问题描述

我结合谷歌地图在我的MVC应用4。相当简单的事情。不过，我就动态地添加多个标记的最佳方式的问题。我的用户将搜索项出售的列表，通过调用的操作方法在控制器上，我希望能够向他们展示的项目，每个地图上的位置。什么我不能确定的是怎么还是最好的方式，动态地添加标记到地图，这是所有的JavaScript客户端。基本上我希望能够从MVC服务器code发送的所有标记信息到客户端，但不知道它可以或应该那么做。

I'm incorporating Google Maps into my MVC 4 application. Fairly straightforward to do. However, I have a question concerning the best way to add multiple markers dynamically. My users will search for a list of items for sale, via a call to an action method on a controller, and I want to be able to show them the items and the location of each on the map. What I'm not certain of is how or the best way, to add markers dynamically to a map, which is all JavaScript in the client. Essentially I'd like to be able to send all the marker information from the MVC server code to the client, but not sure it can or should be done that way.

推荐答案

在这个项目我的工作，现在，这就是我们如何处理它：

In the project I'm working on right now, this is how we handle it:

让主视图模型被称为 FooViewModel 。

的ViewModels：

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

在视图中，有一个＆LT; D​​IV＆GT; 每个 FooWithLocationViewModel 。我们将利用数据 - * 属性这是有效的在HTML5中：

In the view, there is a <div> for each FooWithLocationViewModel. We will make use of data-* attributes which are valid in 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的：

Now, it is time for JavaScript, I am assuming that you are using JQuery:

初​​始化地图，添加标记并将其存储在标记数组：

Initializing the map, adding the markers and storing them in markers array:

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

有关这种做法有什么好，一切都在你的初始化谷歌地图的功能实现。因此，你的脚本没有被嵌入到你的视图。我们使用的是HTML5友好的方式。它是简单的。

What's good about this approach is, everything is done in the function that initializes your Google Map. Thus your script does not have to be embedded in your View. We are using an HTML5 friendly approach. And it is simple.

这篇关于MVC 4和谷歌地图API第3版的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！