Google地图标记未在MVC中显示

Question

我试图通过使用不同的示例，通过我的MVC模型使用纬度和经度呈现Google地图。 Google Map正常显示，但未显示标记。 我是Google地图的新手，对此一无所知。 能否请任何人告诉我如何获得标记？

我的MVC观点如下

    if (Model.WidgetType == "Map")
    {
        <div class="experienceRestrictedText">
                <script src="//maps.google.com/maps/api/js?sensor=false&callback=initialize" type="text/javascript"></script>
                <script type="text/javascript">
                function initialize() {
                        var London = new google.maps.LatLng(@Html.Raw(Json.Encode(Model.UserLatitude)), @Html.Raw(Json.Encode(Model.UserLongitude)));

                        // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
                        var mapOptions = {
                            zoom: 14,
                            center: London,
                            mapTypeId: google.maps.MapTypeId['ROADMAP']
                        };

                        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

                        $.get("/Home/GetMapLocations", function(data){
                            $.each(data, function(i, item){
                                var marker = new google.maps.Marker({
                                    'position' : new google.maps.LatLng(item.Latitude, item.Longitude),
                                    'map' : map,
                                    'title': item.EngineerName
                                });
                            });
                        });

                        @*var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.lstMapLocations));
                        $.each(data, function (i, item){
                            var marker = new google.maps.Marker({
                                'position' : new google.maps.LatLng(item.Latitude, item.Longitude),
                                'map' : map,
                                'title': item.EngineerName
                            });
                        });*@
                    }
                </script>
                <div class="map" id="map" style="width:690px; height:400px;"></div>
        </div>
}

MVC控制器如下

    public ActionResult GetMapLocations()
    {
        var lstMapLocations = new List<MapLocation>();

        var mapLocationModel1 = new MapLocation
        {
            EngineerName = "Engineer1",
            SiteName = "Site1",
            Latitude = 51.507351,
            Longitude = -0.127758,
            LstDouble = new List<double>()
        };

        var mapLocationModel2 = new MapLocation
        {
            EngineerName = "Engineer2",
            SiteName = "Site2",
            Latitude = 51.481728,
            Longitude = -0.613576,
            LstDouble = new List<double>()
        };

        var mapLocationModel3 = new MapLocation
        {
            EngineerName = "Engineer3",
            SiteName = "Site3",
            Latitude = 51.628611,
            Longitude = -0.748229,
            LstDouble = new List<double>()
        };

        var mapLocationModel4 = new MapLocation
        {
            EngineerName = "Engineer4",
            SiteName = "Site4",
            Latitude = 51.26654,
            Longitude = -1.092396,
            LstDouble = new List<double>()
        };

        lstMapLocations.Add(mapLocationModel1);
        lstMapLocations.Add(mapLocationModel2);
        lstMapLocations.Add(mapLocationModel3);
        lstMapLocations.Add(mapLocationModel4);

        foreach(var item in lstMapLocations)
        {
            item.LstDouble.Add(item.Latitude);
            item.LstDouble.Add(item.Longitude);

            item.LatLong = item.LstDouble.ToArray();
        }

        return Json(lstMapLocations);
    }

Answer 1

我找到了解决我的问题的方法，并想与那些偶然发现类似问题的人分享。 礼貌的堆栈溢出帖子，特别是Atish Dipongkor发布的答案。 可能有更好的替代方法来解决此问题，但是这种方法解决了我的问题。 由于Atish在从模型中检索数据时使用了撇号，因此如果在任何模型字段中都包含带有撇号的字符串数据，则可能会破坏功能，因此我对该答案的更改不大。 我对上述虚拟数据的附加解决方案如下

            <div class="experienceRestrictedText">
            <script src="//maps.google.com/maps/api/js?sensor=false&callback=initialize" type="text/javascript"></script>
            <script type="text/javascript">
                function initialize() {
                    var London = new google.maps.LatLng(@Html.Raw(Json.Encode(Model.UserLatitude)), @Html.Raw(Json.Encode(Model.UserLongitude)));

                    // These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
                    var mapOptions = {
                        zoom: 8,
                        center: London,
                        mapTypeId: google.maps.MapTypeId['ROADMAP']
                    };

                    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

                    @foreach (var item in Model.lstMapLocations)
                    {
                    <text>
                    var markerLatLong = new google.maps.LatLng(@(item.Latitude), @(item.Longitude));
                    var markerTitle = @Html.Raw(Json.Encode(item.EngineerName));                        
                    var markerContentString = @Html.Raw(Json.Encode(item.EngineerName)) + " At " + @Html.Raw(Json.Encode(item.SiteName));

                    var infowindow = new google.maps.InfoWindow({
                        content: markerContentString
                    });

                    var marker = new google.maps.Marker({
                        position: markerLatLong,
                        title: markerTitle,
                        map: map,
                        content: markerContentString
                    });

                    google.maps.event.addListener(marker, 'click', (function (marker) {
                        return function () {
                            infowindow.setContent(marker.content);
                            infowindow.open(map, marker);
                        }
                    })(marker));

                    </text>
                    }
                }
            </script>
            <div class="map" id="map" style="width:690px; height:400px;"></div>
        </div>