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

我正在使用谷歌教程中的代码，他们在那里调用codeAddress()了按钮点击事件。我实际上并没有打电话codeAddress()。

添加codeAddress()后initialize()已解决问题。

于 2013-04-09T17:29:31.707 回答