Я использую шаблон MVC, чтобы позволить пользователю добавлять несколько адресов. Они нажимают кнопку, и это вызывает мой шаблон с использованием jquery, и создается форма. Если они хотят добавить другое местоположение, они снова нажимают кнопку, и настраивается другая форма и так далее. Этот шаблон работает нормально, но у меня возникают проблемы с использованием Google Maps в этих шаблонах.
Причина использования Google Maps в этом сценарии — предоставить удобный интерфейс для добавления долготы и широты для добавляемого местоположения. Я использую здесь класс вместо идентификатора, так как на экране может быть любое количество адресных областей.
В моем шаблоне mvc у меня есть следующая разметка:
<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>
У меня есть следующий jquery (это то, что вызывает у меня проблему):
$('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));
});
}
На данный момент я просто жестко кодирую позицию карты по умолчанию «40.713956, -74.006653», но я изменю это, чтобы использовать реальный адрес, как только я смогу правильно отображать карту.
Я знаю, что проблема связана с «mapElement», но я не уверен, что не так. Если я прокомментирую наш вызов функции showAddress и выведу некоторый текст в mapElement, я смогу увидеть текст, поэтому он, похоже, нашел правильное расположение dom.
Любые идеи, которые я мог бы попробовать здесь? Спасибо за вашу помощь.
Спасибо,
Богатый
