将JSON字符串值分配给MVC 4中google.maps.LatLng（lat，lon）中的纬度和经度

Question

控制器动作代码

[HttpGet]
    public JsonResult findlatlon()
    {

        Models.Vehicle_Tracking_SystemEntities entities = new Vehicle_Tracking_SystemEntities();
        var latlon = entities.LatLangs.ToList();
        return Json(new { AddressResult = latlon }, JsonRequestBehavior.AllowGet); 
    }

findlatlon.cshtml查看代码

 { ViewBag.Title = "findlatlon"; } <script src="~/Scripts/jquery-1.8.2.js"></script> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCM7G5ruvunb0K7qxm6jb1TssJUwROqs-g" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var myMarkers = []; $.ajax({ async: false, type: "POST", dataType: "json", url: '@Url.Action("findlatlon", "Home")', data: '{}', success: function(result) { //get address from controller action..... myMarkers = result.AddressResult; } }); //init google map function googleMap() { //alert("Hellooooooo");//alert var mapOptions = { center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude), zoom: 2, mapTypeId: google.maps.MapTypeId.ROADMAP }; //alert(myMarkers[0].Latitude);//alert var infoWindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); for (i = 0; i < myMarkers.length; i++) { data = myMarkers[i]; var marker = new google.maps.Marker({ position: new google.maps.LatLng(data.Latitude, data.Langitude), map: map }); (function(marker, data) { google.maps.event.addListener(marker, "click", function(e) { infoWindow.setContent(data.Location_Adress); infoWindow.open(map, marker); }); })(marker, data); } } //.... google.maps.event.addDomListener(window, 'load', googleMap); }) </script> <div id="map_canvas" style="border-top: none; width: 100%; margin-top: -1px; height: 250px; background-color: #FAFAFA; margin-top: 0px;"> </div> 

输出

{“ AddressResult”：[{“ Id”：1，“ Latitude”：“ 33.9982”，“ Langitude”：“ 71.4999”，“ Address”：“ Peshawar”，“ Image”：null，“ Title”：“ Peshawar” }]}

因此，在这里，AJAX调用控制器，控制器从数据库中检索经度和纬度，并以json字符串返回它，以像上面的输出一样进行查看。

但是在这里，我希望将json返回的纬度和经度值分配给
中心： new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude) ，我想根据纬度和经度在Google地图上显示位置

Answer 1

这是在单击按钮时显示google map的示例，它会相应显示您的响应，请确保使用“ markers.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');
                    }
                });
            }
        });
    }

希望这可以帮助！

Answer 2

步骤1首先创建Controller Action：

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

步骤2为该操作创建空视图：

 @{ 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> 

步骤3从上面的视图进行ajax调用，即url：'@ Url.Action（“ googlemapfindlatlon”，“ Home”）'，因此在控制器中创建“ googlemapfindlatlon” JsonResult操作：

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

这对我来说是正确的。 非常感谢你