0

検索結果のリストがあります。各結果の横にはボタンがあり、クリックすると Bootstrap モーダルを含む部分ビューが起動します。

モーダルは厳密に型指定されており、渡されたオブジェクトは住所を持つ住宅を表しています。アドレスはモーダル ヘッダーに表示されます。

アドレスを取得して、それをジオコーディングし、モーダルのタブに表示する JS 関数に渡そうとしています。

私が試したこと：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 id="myModalLabel" data-id="@Model.Address.Line1,@if (Model.Address.Line2 != null)
    { @Model.Address.Line2; },@Model.Address.TownCity,@Model.Address.County">
        // display the address
    </h4>
</div>

<div class="modal-body">
    <div id="map-canvas" style="width: 400px; height: 400px">map canvas</div>
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>

部分の終わりとしての JS:

<script type="text/javascript">
initialize();

var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}

function codeAddress() {
    var address = $('#myModalLabel').attr('data-id');
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
google.maps.event.addDomListener(window, "load", initialize);

そこで、住所を表示するモーダルラベルに属性を追加して、関数data-idでそれを選択しようとしました。codeAddress()

ハードコーディングされた latlng を含むデフォルト マップが表示されますが、ジオコーディングは行われません。誰かが私を正しい方向に向けることができますか? おそらく、モデルからアドレスを取得して に渡すよりエレガントな方法を提供しcodeAddress()ます。

4

1 に答える 1

0

私はGoogleのチュートリアルのコードを使用していましたがcodeAddress()、ボタンクリックイベントで呼び出していました。私は実際に電話していませんでしcodeAddress()た。

codeAddress()後に追加するinitialize()と問題が解決しました。

于 2013-04-09T17:29:31.707 に答える