緯度と経度MVC 4

Question

のcontrolerアクションコードにgoogle.maps.LatLng（緯度、経度）で

[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>

するJSON文字列値を割り当て アウトレット

{"AddressResult"：[{"Id"：1、 "Latitude"： "33.9982"、 "La ngitude "：" 71.4999" 、 "住所"： "ペシャワール"、 "画像"：ヌル、 "タイトル"： "ペシャワール"}]}だからここ

AJAXは、コントローラおよびコントローラを呼び出す経度を取得し、上記の出力のように表示するにはjsonの文字列で返します。

しかし、ここで私はJSONで返す緯度と経度の値が
センターに割り当てるであることを望んでいる：new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude) そして、私はここで緯度とロング

Answer 1

に応じグーグルマップ上の場所を表示したいですclickedボタンにGoogleマップを表示する例です。レスポンスを表示するには、必ず 'markerers.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'); 
        } 
       }); 
      } 
     }); 
    } 

これが役に立ちます。このアクションに空のビューを作成します

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

ステップ-2：

すべての

Answer 2

ステップ-1ファーストは、コントローラのアクションを作成します

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

これは私のために正しく仕事をしています。 ありがとうございました