将JSON字符串值分配给MVC 4中的google.maps.LatLng(lat,lon)中的Latitude和Lon

这是一个在按钮点击时显示谷歌地图的例子，它相应地显示您的响应，确保使用'marker .push(v);'需要相应地更改您的代码。

 var markers = [];
    window.onload = function () {
        $('#getMap').click(function () {
            var deviceId = $('#deviceNumber').val();
            if (deviceId != null || deviceId != "") {
                $.ajax({
                    type: "GET",
                    url: url,
                    data: {},
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function (i, v) {
                            markers.push(v);
                        });
                        var mapOptions = {
                            center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
                            zoom: 10,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                        var infoWindow = new google.maps.InfoWindow();
                        var lat_lng = new Array();
                        var latlngbounds = new google.maps.LatLngBounds();
                        for (i = 0; i < markers.length; i++) {
                            var data = markers[i]
                            var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
                            lat_lng.push(myLatlng);
                            var marker = new google.maps.Marker({
                                position: myLatlng,
                                map: map,
                                title: data.title
                            });
                            latlngbounds.extend(marker.position);
                            (function (marker, data) {
                                google.maps.event.addListener(marker, "click", function (e) {
                                    infoWindow.setContent(data.description);
                                    infoWindow.open(map, marker);
                                });
                            })(marker, data);
                        }
                        map.setCenter(latlngbounds.getCenter());
                        map.fitBounds(latlngbounds);
                        //***********ROUTING****************//
                        //Initialize the Path Array
                        var path = new google.maps.MVCArray();
                        //Initialize the Direction Service
                        var service = new google.maps.DirectionsService();
                        //Loop and Draw Path Route between the Points on MAP
                        for (var i = 0; i < lat_lng.length; i++) {
                            if ((i + 1) < lat_lng.length) {
                                var src = lat_lng[i];
                                var des = lat_lng[i + 1];
                                service.route({
                                    origin: src,
                                    destination: des,
                                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                                }, function (result, status) {
                                    if (status == google.maps.DirectionsStatus.OK) {
                                        var path = new google.maps.MVCArray();
                                        var poly = new google.maps.Polyline({
                                            map: map,
                                            strokeColor: '#4986E7'
                                        });
                                        poly.setPath(path);
                                        for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                            path.push(result.routes[0].overview_path[i]);
                                        }
                                    }
                                });
                            }
                        }
                    },
                    error: function () {
                        alert('error');
                    }
                });
            }
        });
    }

希望这对你有帮助!

步骤1首先创建控制器动作:

 public ActionResult googlemap()
    {
        return View();
    }

step2创建空视图到这个动作:

@{
    ViewBag.Title = "Google Map";
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR-KEY" type="text/javascript"></script>
<script type="text/javascript">
        var myMarkers = [];
    
            $.ajax({
                async: false,
                type: "POST",
                dataType: "json",
                url: '@Url.Action("googlemapfindlatlon", "Home")',
                data: '{}',
                success: function (data) {
                    $.each(data, function (i, v) {
                        myMarkers.push(v);
                    });
                    var mapOptions = {
                        center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    //alert(myMarkers[0].Latitude)
                    //alert(myMarkers[0].Langitude)
                    var infoWindow = new google.maps.InfoWindow();
                    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                    var lat_lng = new Array();
                    var latlngbounds = new google.maps.LatLngBounds();
                    for (i = 0; i < myMarkers.length; i++) {
                        var data = myMarkers[i]
                        var myLatlng = new google.maps.LatLng(data.Latitude, data.Langitude);
                        lat_lng.push(myLatlng);
                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            map: map,
                            title: data.title
                        });
                        latlngbounds.extend(marker.position);
                        (function (marker, data) {
                            google.maps.event.addListener(marker, "click", function (e) {
                                infoWindow.setContent(data.Address);
                                infoWindow.open(map, marker);
                            });
                        })(marker, data);
                    }
                    //map.setCenter(latlngbounds.getCenter());
                    //map.fitBounds(latlngbounds);
                }
            });
            //init google map
        }
</script>
<div id="map_canvas" style="border-top: none; width: 100%; margin-top: -1px;
 height: 250px; background-color: #FAFAFA; margin-top: 0px;">
</div>

step3从上面的视图中，ajax调用被发出，即:url:。行动("googlemapfindlatlon"、"家")所以在controller:

 public JsonResult googlemapfindlatlon()
    {
        Models.Vehicle_Tracking_SystemEntities entities = new Vehicle_Tracking_SystemEntities();
        var latlon = entities.LatLangs.ToList();
        //var latlon = entities.LatLangs.OrderByDescending(x => x.Id).Take(1).ToList();
        return Json(latlon, JsonRequestBehavior.AllowGet);
    }

这是做正确的工作为我。非常感谢