我使用 MVC 模板来允许用户添加多个地址。他们单击一个按钮，这将使用 jquery 调用我的模板并生成表单。如果他们想添加另一个位置，他们再次单击该按钮并设置另一个表单，依此类推。此模板工作正常，但我在这些模板中使用 Google 地图时遇到了一些问题。
在这种情况下使用谷歌地图的原因是提供一个很好的界面来为您添加的位置添加经度和纬度。我在这里使用类而不是 id，因为屏幕上可能有任意数量的地址区域。
在我的 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 位置。
我可以在这里尝试任何想法吗？谢谢你的帮助。
谢谢，
富有的