首页 > 解决方案 > 如何使用asp.net mvc中的ajax从谷歌地图的数据库中加载信息窗口中的数据?

问题描述

我正在尝试使用信息窗口加载多个标记,包括来自数据库的数据。问题是它不显示来自 的任何数据db,而是显示带有空信息窗口的标记。

控制器

public JsonResult GetAllLocation()
        {
            var data = db.tb_freeslot.ToList();
            return Json(data, JsonRequestBehavior.AllowGet);
        }

看法

<div id="map"></div>
        <script>
         var map;
         function initMap(zoomeLevel, latDb, longDb) {
          map = new google.maps.Map(document.getElementById('map'), {
          center: { lat: latDb != null ? latDb : 10.523900, lng: longDb != null ? longDb : 76.212250 },
              zoom: zoomeLevel != null ? zoomeLevel : 15
          });
      }
      $.ajax({
          url: '/user/GetAllLocation',
          type: 'GET',
          success: function (data) {
                                var markers = [];
                                    $.each(data, function (index, item) {
                                      var marker = {};
                                           marker["title"] = item.slotinfree_name;
                  marker["lat"] = item.Lat_infree;
                  marker["lng"] = item.Long_infree;
                  marker["description"] = item.car_freeslot;
                  markers.push(marker);
              })
                                  initializeMap(markers);}});
         var infoWindow = new google.maps.InfoWindow();
          var map = new google.maps.Map(document.getElementById("map"), GoogleMapOptions);
                         for (i = 0; i < markers.length; i++) {
              var data = markers[i]
                              var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                  var marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title: data.title
              });
                  (function (marker, data) {
                  google.maps.event.addListener(marker, "click", function (e) {
                      infoWindow.setContent(data.title);
                      infoWindow.open(map, marker);
                  });
              })(marker, data);}}
    </script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNKM7UFRBfd6BfD3UwfRQRRpSgu2TsiU&callback=initmap"
            async="" defer="defer" ></script>   

标签: javascriptjqueryasp.net-mvcasp.net-ajax

解决方案


推荐阅读