使用JSON在部分视图中打开Goog​​le地图

Question

我试图在JSON的部分视图内显示Google地图。我已经试过普通视图中的代码，并且它工作得很好。

我有以下几点： -

管窥ShowMap.cshtml

@using Microsoft.Web.Helpers 

<script src="~/Scripts/jquery-1.8.3.min.js"></script> 
<div class="experienceRestrictedText"> 
    @Maps.GetGoogleHtml("1, Redmond Way, Redmond, WA", width: "400", height: "400") 
</div> 

Index.cshtml（其中局部视图启动）

$('.modal_link_map').on('click', function (e) { 
     $('.modal_part').show(); 
     var id = $(this).attr('data-id'); 
     var context = $('#tn_select').load('/Experience/ShowMap?id=' + id, function() { 
      initSelect(context); 
     }); 
     e.preventDefault(); 
     return false; 
    }); 

而控制器动作是为如下： -

 public ActionResult ShowMap() 
     { 
     _ItemID = Convert.ToInt32(Request.QueryString["id"]); 

     viewModel.ExperienceViewModel.Experience =  unitOfWork.ExperienceRepository.GetByID(_ItemID); 

     return PartialView(viewModel); 
     } 

我是否需要为此地图添加其他任何内容？

Answer 1

我不熟悉的@Maps.GetGoogleHtml帮手，但恐怕，不知怎的，这个助手是包括以下脚本：

<script src="//maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

除了这个脚本不能被异步，因为它使用document.write()加载实际API加载。要完成这项工作，您应该指定callback参数。下面是你的局部看起来是这样：

<div class="experienceRestrictedText"> 
    <script src="//maps.google.com/maps/api/js?sensor=false&callback=initialize" type="text/javascript"></script> 
    <script type="text/javascript"> 
     function initialize() { 
      var map = new google.maps.Map(document.getElementById("map"), { zoom: 14, center: new google.maps.LatLng(47.652437, -122.132424), mapTypeId: google.maps.MapTypeId['ROADMAP'] }); 
      new google.maps.Geocoder().geocode({ address: '1, Redmond Way, Redmond, WA' }, function (response, status) { 
       if (status === google.maps.GeocoderStatus.OK) { 
        var best = response[0].geometry.location; 
        map.panTo(best); 
        new google.maps.Marker({ map: map, position: best }); 
       } 
      }); 
     } 
    </script> 
    <div class="map" id="map" style="width:400px; height:400px;"></div> 
</div> 

注意回调参数是如何传递给http://maps.google.com/maps/api/js脚本和地图的实际初始化这个回调中完成。

另请注意，我已经从部分中删除了jquery脚本。我猜jQuery已经加载到你的布局中，因为你似乎正在使用它来附加到.on()处理程序。

作为一种替代方案，您可以在主视图中包含<script src="//maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>，但一旦您加载了部分内容，帮助程序将会再次包含该内容。

就我个人而言，我不是那种帮助者的忠实粉丝，因为他们完全掩盖了底层呼叫，让您无法控制和理解所发生的事情。