0
MVCテンプレートを使用して、複数の住所を追加できるようにします。彼らはボタンをクリックするとjqueryを使用してテンプレートが呼び出され、フォームが生成されます。別の場所を追加したい場合は、もう一度ボタンをクリックし、別のフォームが設定されているなどです。このテンプレートは正常に機能しますが、これらのテンプレート内でGoogleマップを使用するのに問題があります。Googleマップを動的フォームで使用する方法
このシナリオでGoogleマップを使用する理由は、追加する場所に経度と緯度を追加するための素晴らしいインターフェースを提供するためです。私は画面上に任意の数のアドレスエリアが存在する可能性があるので、IDの代わりにここでクラスを使用しています。私はちょうどよ今の
$('a.GetPosition').live("click", function (evt) {
evt.preventDefault();
$(this).next().show();
var mapElement = $(this).closest('.body').find('.map');
var latElement = $(this).closest('.body').find('[id$=__Address_Latitude]');
var longElement = $(this).closest('.body').find('[id$=__Address_Longitude]');
showAddress(mapElement, latElement, longElement);
});
// Google Map
var map;
function showAddress(mapElement, latElement, longElement) {
var myLatlng = new google.maps.LatLng(40.713956, -74.006653);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapElement, myOptions);
var marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map,
title: "choose location"
});
google.maps.event.addListener(marker, 'click', function (event) {
latElement.val(event.latLng.lat().toFixed(5));
longElement.val(event.latLng.lng().toFixed(5));
});
}
：私は、次のjQueryを（これは私に問題を与えているビットである）を持つ
<div class="body">
<div class="st-form-line">
<span class="st-labeltext">Location</span>
<a href="#" class="GetPosition">Get Latitude & Longitude positions based on above address details.</a>
<div class="mapContainer" style="display:none;">
<p>If the map position is incorrect simply drag the pointer to the correct location.</p>
<div class="map" style="width: 450px; height: 350px;"><br/></div>
</div>
<div class="clear"></div>
</div>
<div class="st-form-line">
<span class="st-labeltext">@Html.LabelFor(model => model.Address.Longitude)</span>
@Html.EditorFor(model => model.Address.Longitude)
@Html.ValidationMessageFor(model => model.Address.Longitude)
<div class="clear"></div>
</div>
<div class="st-form-line">
<span class="st-labeltext">@Html.LabelFor(model => model.Address.Latitude)</span>
@Html.EditorFor(model => model.Address.Latitude)
@Html.ValidationMessageFor(model => model.Address.Latitude)
<div class="clear"></div>
</div>
</div>
：私は次のマークアップを持っている私のMVCテンプレートで
'40 .713956、-74.006653 'のデフォルトのマップ位置でハードコーディングしていますが、マップを正しく表示するには、実際のアドレスを使用するようにこれを変更します。
私は問題が 'mapElement'にあることを知っていますが、何が間違っているのかは分かりません。 showAddress関数の呼び出しにコメントし、mapElementに何らかのテキストを出力すると、テキストが表示されるので、正しいdom loctionが見つかったように見えます。
私がここで試すことができるアイデアはありますか？ご協力いただきありがとうございます。
おかげで、静的な緯度とLNGをロードするための
リッチ
あなたの答えAnilに感謝します。残念ながら、私の問題は、一度表示するGoogleマップを取得することではなく、IDの代わりにクラスを使用して特定のdivに表示することです。私のコードは正しい要素を見つけているようですが、Googleマップではこの要素をどのように渡すのが好きではないようです。 –