Question

我是asp.net mvc开发的新手，并且在一个小问题上运行。

我想在点击谷歌地图并在控制器中发回新坐标后更新局部视图，这是我的控制器电话

public PartialViewResult Events_ret(string lati, string longi)
    {
        double lat = Convert.ToDouble(lati.Replace(".", ","));
        double lon = Convert.ToDouble(longi.Replace(".", ","));
        double distance = 20000;

        var sourcePoint = GeographyPoints.CreatePoint(lat, lon);

        List<Events> vm = new List<Events>();

        vm = (from eve in db.Events
              where eve.location.Distance(sourcePoint) < distance
              orderby eve.start_time
              select eve).ToList();
        return PartialView("_Events", vm);
    }

当我点击一个按钮点击它时，我得到了更新，但我希望它在地图上单击somwhere时返回新值，这样我就可以根据新坐标将新值返回给视图

我在_Layout中的谷歌地图

    @*<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>*@
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=google_keyY&sensor=false"></script>
<script type="text/javascript">


   $(document).ready(function () {
 initialize();
   });

   function initialize() {

   // Create an array of styles.
   var styles = [
     {
         stylers: [
           { hue: "#FF8800" },
           { saturation: 0 }
         ]
     }, {
         featureType: "road",
         elementType: "geometry",
         stylers: [
           { lightness: 100 },
           { visibility: "simplified" }
         ]
     }];

   // Create a new StyledMapType object, passing it the array of styles,
   // as well as the name to be displayed on the map type control.
   var styledMap = new google.maps.StyledMapType(styles,
     { name: "Styled Map" });

   var mapOptions = {
       zoom: 9,
       center: new google.maps.LatLng(45.2167, 13.9473),
       mapTypeControlOptions: {
           mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
       }
   };

   var map = new google.maps.Map(document.getElementById('googleMaps'),
     mapOptions);

   @foreach (var place in Model)
   {
       <text>
   var latlng = new google.maps.LatLng(@place.location.Latitude.ToString().Replace(",", "."), @place.location.Longitude.ToString().Replace(",", "."));
       var marker = new google.maps.Marker({
           position: latlng,
           map: map
       });
       </text>
   }

   var cityCircle = new google.maps.Circle({
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 0,
       fillColor: '#8c8c8c',
       fillOpacity: 0.35,
       map: map,

       draggable: true,
       geodesic: true,

       center: {lat:45.2 , lng:13.92},
       radius: 20000
   });


   //Attach click event handler to the map.
   google.maps.event.addListener(map, 'click', function (e) {

       //Determine the location where the user has clicked.
       var location = e.latLng;

       cityCircle.setCenter(location);
       cityCircle.setRadius(20000);



       var requestData = {
           lati: location.lat,
           longi: location.lng
           //viewName: 'Events_part'
       };

       //$.post('/Home/GogMapClick', { lati: location.lat, longi: location.lng }, function (data) {
       //    document.location = data;
       //});

这里是我现在不想做的调用的缺失代码，我尝试用ajax调用但是ajax被调用以返回到这个页面

   });

   //Associate the styled map with the MapTypeId and set it to display.
   map.mapTypes.set('map_style', styledMap);
   map.setMapTypeId('map_style');
   }

</script>

我需要在这里做两件事，一件是刷新局部视图，二是根据新数据用新标记刷新谷歌地图

也许我对这一切都采取了错误的方式，但我在过去的4个小时内坚持了这个并且不能再思考了。）

P.S。为我糟糕的英语道歉

更新

我得到了使用ajax调用加载新数据的部分视图

$.ajax({
           url: "Home/Events_ret",
           type: "get",
           data: requestData,
           success: function (result) {
               $("#events").html(result);
           }
       });

加载局部视图

<div id="events" class="row">
@Html.Partial("_Events")
</div>

以及Google地图容器所在的部分视图代码

@model List<NOOX.Models.Events>

<div id="customerresult" class="itemdetailws">
@{
    foreach (var curentEvent in Model)
    {
        <div class="col-md-6">
            <div>
                <h4>@Html.DisplayFor(model => curentEvent.Name)</h4>
            </div>
        </div>
    }
}
</div>

<div class="map_container" id="googleMaps" />

现在唯一的问题是我的谷歌地图显示在第一页加载，但在我点击地图并获取新数据后，地图不再显示，只显示新数据

点击谷歌地图后更新部分视图

0 个答案: