Я использую шаблон MVC, чтобы позволить пользователю добавлять несколько адресов. Они нажимают кнопку, и это вызывает мой шаблон, используя jquery, и создается форма. Если они хотят добавить другое местоположение, они снова нажимают кнопку, и настраивается другая форма и так далее. Этот шаблон работает нормально, но у меня возникают проблемы с использованием Карт Google в этих шаблонах.
Причиной использования 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, я смогу увидеть этот текст, и он, похоже, нашел правильную точку доступа.
Есть идеи, которые я мог бы попробовать здесь? Спасибо за вашу помощь.
Спасибо
Rich