分配JSON字符串值的纬度和经度在google.maps.LatLng（LAT，LON）在MVC 4

Question

的Controler行动码

[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” ngitude “：” 71.4999" ， “地址”： “白沙瓦”， “图片”：空， “标题”： “白沙瓦”}]}

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

但在这里我想这其中由JSON返回的纬度和经度值分配给
中心：new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude) 我想根据纬度和长

Answer 1

这里显示在谷歌地图中的位置是点击按钮显示谷歌地图的一个例子，它显示相应的响应，确保使用'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步：首先创建控制器动作：

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”）' so在控制器中创建“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); 
    } 

这对我来说工作正常。 非常感谢您