javascript - Google map 标记未在 MVC 中显示

Question

我正在尝试使用不同的示例从我的 MVC 模型中渲染具有纬度和经度的 Google map 。谷歌地图显示正常，但不显示标记。我对谷歌地图非常陌生，对它感觉完全一无所知。谁能告诉我如何获得标记？

我的MVC View 如下

    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 Controller 如下

    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

我找到了解决我的问题的方法，并想将其分享给那些可能偶然发现类似问题的人。礼貌stack overflow post特别是 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>