首页 > 解决方案 > 我想在使用 ajax 的数据库的帮助下使用 .net mvc 在 Google Map 上显示脉冲动画

问题描述

@{
    ViewBag.Title = "Index";

}


<style>


    #map {
       
           height: 500px;
    
}


</style>


<br />


<br />


<div>
       <select class="form-control"    id="selectedValue"   onchange="GoLocation(this.value)">
      

             @foreach (var item in ViewBag.ListOfDropdown)
          

                {
             


                 <option value="@item.id">@item.Address</option>
             

                  }
    

</select>


</div>


<br />


<div class="row">


    <div id="map"></div>
    

    <script>

          var map;


        function initMap() {


            map = new google.maps.Map(document.getElementById('map'), {


                center: { lat: 31.53561, lng: 74.35896 },


                zoom: 12,



            });


        }


              function GoLocation(locationId) {



                  $.get("/Home/GetAllLocationById?Id=" + locationId, function (data, success) {

                      


                          var path = data.Rating == 0 ? "../../icons/icon.png" : 


"../../icons/red_pulse.gif";
                        

                         
                                   marker = new google.maps.Marker({
                                   
                              
                                   position: { lat: data.Lat, lng: data.Long },
                              


                                       map: map,
                              


                                icon: { url: path, scaledSize: new google.maps.Size(30, 30) },
                                  


                                    optimized: false


                          });




                            contentString = '<div id="content">' +
                              

                               '<div id="siteNotice">' +
                             


                                   '</div>' +
                             



                '<h1 id="firstHeading" class="firstHeading">' + data.Address + '</h1>' +
                              


                           '<div id="bodyContent">' +
                              





                     '<p><b>' + data.Address + '</b>, is a safe city site node</b>';





                         
                      infowindow = new google.maps.InfoWindow({
                             

                       content: contentString
                          

});

                         



 google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                            


  return function () {
                            

      infowindow.open(map, marker);

                         

                  }
                          })(marker, i));
                        

  google.maps.event.addListener(marker, 'mouseout', (function (marker, i) {
                            


  return function () {
                            


      infowindow.close();
                         

     }
                         

 })(marker, i));
                

  })
               

 }  

     </script>
</div>

这是我的搜索内容代码。通过数据库,当警报 = 0 时,谷歌地图上不会显示任何脉冲。当 alert=1 时,Google Map 上会显示一个脉冲动画。

但我想在 ajax 的帮助下显示脉冲动画。

标签: c#jqueryasp.net-mvcdatabaseasp.net-ajax

解决方案


推荐阅读