Javascript 当点击1时，谷歌地图不显示

首先，我把谷歌地图放在顶部，它显示得很好，但是当我点击1，然后打开det1，在det1div中，谷歌地图显示得不好，我认为它的jquery合并错误。请帮忙，提前谢谢

以下是jquery代码：

jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
    }

    e.preventDefault()
});

---

这不是jquery错误。这是谷歌地图的问题。渲染google地图后，如果调整其大小或更改其可见性，您将经常遇到视觉问题，如局部渲染

因此，问题是您在生成地图时iframe仍然处于隐藏状态，因此当您显示它时，地图将出现视觉问题。相反，仅在显示iframe后加载贴图，它将工作：

HTML:

试试你的小提琴吧：

编辑：

您可以在标记上创建自定义属性，以便为每个iframe指定不同的url：

HTML:

---

更新的小提琴：

人。。。我完全不知道你想做什么。。。。你能解释清楚吗？@LcSalazar你看到JS小提琴链接了吗？当我点击链接1。。。然后打开一个det1 div，你会看到谷歌地图，它显示得不好。。我认为这是jquery冲突错误非常感谢：拥抱：：*但是如果我想在2链接不同的地图中，那么我能做什么呢？再次感谢：*我爱你，伙计：

<div class="product-detail det1 cf">
    <div class="product-detail-row cf">1</div>
    <div class="directoria-map">
            <iframe src="" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div><!-- directoria-map -->
    <!-- .product-detail-row -->
</div>

jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
        $('.det' + id).find("iframe").attr("src", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3988.526251756596!2d-48.4791421!3d-1.4581948999999998!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x92a48e80253e4c21%3A0x2d5679c46276bb6!2sRua+dos+Mundurucus%2C+3100+-+Jurunas!5e0!3m2!1sen!2sbr!4v1402684785532");
    }

    e.preventDefault()
});

 <!-- .product-main -->
<div class="product-detail det1 cf">
    <div class="product-detail-row cf">1</div>
    <div class="directoria-map">
            <iframe maps-url="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3988.526251756596!2d-48.4791421!3d-1.4581948999999998!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x92a48e80253e4c21%3A0x2d5679c46276bb6!2sRua+dos+Mundurucus%2C+3100+-+Jurunas!5e0!3m2!1sen!2sbr!4v1402684785532" src="" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div><!-- directoria-map -->
    <!-- .product-detail-row -->
</div>

jQuery('a[id^="prod"]').on('click', function (e) {
    var id = $(this).attr('id').slice(-1);
    var previs = $('div.product-detail:visible');
    $('div.product-detail').hide();
    if (previs.is($('.det' + id))) {
        $('.det' + id).hide()
    }
    else
    {
        $('.det' + id).show();
        var url = $('.det' + id).find("iframe").attr("maps-url");
        $('.det' + id).find("iframe").attr("src", url);
    }

    e.preventDefault()
});