使用mvc模型在Google Maps API v3

Using mvc model to display markers on Google Maps API v3

本文关键字：Maps API v3 Google mvc 模型 使用      更新时间：2023-09-26

我正在尝试发送一个IEnumerable模型，其中包括我想在我的网站上显示的谷歌地图上显示的纬度和经度值。

以下是我在视图中用于显示地图的代码：

@model IEnumerable<ProjectName.Models.modelname>
@{
    ViewBag.Title = "Map View";
}
<script src="http://maps.google.com/maps/api/js?key=My-API-Key" type="text/javascript"></script>

<style>
    #map_canvas img {
    max-width: none;
    }
</style>

<style>
    .infoDiv {
    height: 200px;
    width: 300px;
    -webkit-user-select: none;
    background-color: white;
}
</style>
<h2>Map</h2> <a class="btn btn-default" href="/Tags/Create">Create Tag &raquo;</a>
<hr />
<div id="map_canvas" style="height: 600px;"></div>

@section scripts {
<section class="scripts">
    <script type="text/javascript">

$(document).ready(function () {
    Initialize();
});

function Initialize() {

    google.maps.visualRefresh = true;
    var Liverpool = new google.maps.LatLng(-26.71452, 27.097047);

    var mapOptions = {
        zoom: 14,
        center: Liverpool,
        mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var myLatlng = new google.maps.LatLng(-26.674359 , 27.095391);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Tate Gallery'
    });

    marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

    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" }
           ];

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

        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')

        var infowindow = new google.maps.InfoWindow({
            content: "<div class='infoDiv'><h2>" + item.PlaceName + "</h2>" + "<div><h4>Opening hours: " + item.OpeningHours + "</h4></div></div>"
        });
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    })
}

    </script>
</section>
}

我目前正在用伪数据预填充它，但我无法从我的模型中检索数据。

由于无法在脚本中运行foreach循环，我将如何使用该模型？

提前感谢！

找到答案了！我需要使用以下方法从控制器返回我的JSon数据：

public ActionResult MapView()
{
    var tags = db.Tags.ToList();
    var jsonTags = from x in tags
                   select new Tags
                   {
                       GeoName = x.GeoName,
                       GeoLat = x.GeoLat,
                       GeoLong = x.GeoLong
                   };
    return View(jsonTags);
}

谢谢你的帮助！Json.Encode也是需要的！

在您的视图Json.Encode可以将您的列表转换为Json数组

剃须刀

@Html.Raw(Json.Encode(YourModel))

ASPX-

<%=html.Raw(Json.Encode(YourModel)%>

-

var data = <%=html.Raw(Json.Encode(YourModel)%>;
相关文章：