0

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);
        }

このマップを機能させるには、他に何かを含める必要がありますか?

4

1 に答える 1

6

私は@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 スクリプトをパーシャルから削除したことにも注意してください。.on()ハンドラーにアタッチするためにjQueryを使用しているように見えるため、jQueryはすでにレイアウトにロードされていると思います。

別の方法として、メイン ビューに を含めることもできますが<script src="//maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>、パーシャルをロードすると、 @Maps.GetGoogleHtmlヘルパーはそれをもう一度含めます。

個人的には、この種のヘルパーの大ファンではありません。なぜなら、ヘルパーは根本的な呼び出しを完全に覆い隠してしまい、何が起こっているのかをあまり制御したり理解したりすることができなくなるからです。

于 2013-01-13T10:30:37.180 に答える