0

我有一个要编辑的地址模型的可变长度集合。我使用史蒂夫桑德森的方法来编辑收藏

我通过 Ajax 添加了一个 EditAddress 部分视图（RenderPartial），点击一个按钮，效果很好。

这个局部视图还包含一个谷歌地图“控件”，它允许指出地图上的地址。初始化地图需要传入我希望地图出现的 div 元素的 id。所以在部分视图中，我定义了一个 id 为“#map”的 div，并通过 jquery 将其传递给谷歌地图初始化程序（脚本位于局部视图中）。

现在的问题是，当添加了多个这些部分视图时，页面将有多个“#map”div（当我查看源代码时，我看不到通过 ajax 添加的元素，尽管页面渲染得很好，所以我只是猜测id 将是相同的），如何选择一个元素的正确 id 来连接 jquery？

如果根本不可能，我有什么选择？

4

1 回答 1

3

不要使用 id 选择器，使用其他东西，比如类选择器。

var map = new google.maps.Map($('.map')[0], myOptions);

如果您有多个地图选择器，您可以遍历包含它们的列表元素，并单独初始化每个。

$('.map-listing-element').each(function(){
    var mapElement = $(this).find('.map-canvas');
    var options = {...};  // whatever the options are
    var googleMap = new google.maps.Map(mapElement[0], options);
});

<div class="this-box-wraps-all-maps">
    <div class="map-listing-element">
        ...load your partial views wrapped in this element
        Map 1
        <div class="map-canvas"></div>
    </div>
    <div class="map-listing-element">
        ...load your partial views wrapped in this element
        Map 2
        <div class="map-canvas"></div>
    </div>
    <div class="map-listing-element">
        ...load your partial views wrapped in this element
        Map 3
        <div class="map-canvas"></div>
    </div>
    <div class="map-listing-element">
        ...load your partial views wrapped in this element
        Map N
        <div class="map-canvas"></div>
    </div>
</div>
于 2012-06-25T15:17:26.597 回答