如何从 MVC 模型填充 Google 地图注释

Question

我在使用 Google 地图方面进展顺利。

我下面的示例使用硬编码 JSON 数组来创建注释

// You can make markers different colors...  google it up!
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

// a sample list of JSON encoded data of places to visit in Liverpool, UK
// you can either make up a JSON list server side, or call it from a controller using JSONResult
var data = [
          { "Id": 1, "PlaceName": "Liverpool Museum", "OpeningHours":"9-5, M-F","GeoLong": "53.410146", "GeoLat": "-2.979919" },
          { "Id": 2, "PlaceName": "Merseyside Maritime Museum ", "OpeningHours": "9-1,2-5, M-F", "GeoLong": "53.401217", "GeoLat": "-2.993052" },
          { "Id": 3, "PlaceName": "Walker Art Gallery", "OpeningHours": "9-7, M-F", "GeoLong": "53.409839", "GeoLat": "-2.979447" },
          { "Id": 4, "PlaceName": "National Conservation Centre", "OpeningHours": "10-6, M-F", "GeoLong": "53.407511", "GeoLat": "-2.984683" }
       ];

// Using the JQuery "each" selector to iterate through the JSON list and drop marker pins
$.each(data, function (i, item) {
    var marker = new google.maps.Marker({
        'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
        'map': map,
        'title': item.PlaceName
    });

但是，我是 MVC 的新手。请有人澄清评论中提到的两种方法吗？我拥有 C# 对象列表中的所有要点。这个列表在我的页面模型对象中。包含列表的 AlertsDashboardModel - Alerts

我可能会直接在模型中使用列表，但我很好奇其他方法如何工作

我正在使用带 Razor 的 MVC 5

保罗

Answer 1

第二种方法是在页面加载后加载数据（或者作为页面上用户交互的结果，例如按下按钮），然后向服务器发送 ajax 请求returns数据：

客户：

$(function () {
    //fetch data points from server on page load
    $.get("/YourController/GetDataPoints", function(data) {
        $.each(data, function (i, item) {
        //rest omitted
    });
}

服务器：（在你的Controller）

public JsonResult GetDataPoints()
{
    return new JsonResult { Data = ...your list here };
}

更新

如果您只想在服务器端使用第一种方法将列表嵌入为 javascript，请在您的 razor 视图中执行此操作：

<script>
        var data = @Html.Raw(JsonConvert.SerializeObject(Model.DataPoints));
</script>

关于安全性 您需要确保该列表中的所有内容都来自受信任的来源，并且没有未经验证的字符串可以注入页面（如果您的数据点 class 只包含 int 你会没事的）

如何从 MVC 模型填充 Google 地图注释

How do I populate Google Map annotations from MVC model

c#

model-view-controller

json

google-maps

更新