用JSON在局部视图中打开谷歌地图

本文关键字：谷歌地图 视图 JSON 局部 | 更新日期: 2023-09-27 17:52:17

我试图在JSON的部分视图中显示谷歌地图。我已经在一个正常的视图中尝试了代码，它工作得非常好。

我有以下内容:-

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>

索引。cshtml(启动Partial视图的地方)

    $('.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);
        }

我需要包括任何其他这张地图的工作吗?

用JSON在局部视图中打开谷歌地图

我不熟悉@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>，但是一旦你加载了部分@Maps.GetGoogleHtml助手将第二次包含它。

我个人不太喜欢这类帮助，因为它们完全模糊了底层调用，使您无法控制和理解正在发生的事情。

相关文章：