谷歌地图信息窗口中的 Flexslider 未加载图像答案

【问题标题】：Flexslider in google map info window is not loading images谷歌地图信息窗口中的 Flexslider 未加载图像
【发布时间】：2015-03-10 07:33:44
【问题描述】：

我正在尝试使用 flex 滑块在 google maps infowindow 的 django 应用程序中添加一个滑块。我的代码是这样的。

{% load thumbnail i18n humanize static %}
<script type="text/javascript">
$(window).load(function(){
  $('#slide1 , #slide2').flexslider({
    animation: "slide",
    slideshow: false,
    controlNav : false,
    start: function(slider) {
  slider.removeClass('loading');
}
  });

});
</script>




<script>
$(document).ready(function() {
var markers=[];
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map( document.getElementById("gmap"),  {
    zoom: 5,
    minZoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    panControl: false,
    streetViewControl: false,
    mapTypeControl: false
});
{% for course in courses %}
    {% if course.object.location %}
        var lat = '{{ course.object.location.lat }}';
        var lng = '{{ course.object.location.lng }}';
        var myLatLng = new google.maps.LatLng(lat,lng);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            draggable:true,
            title: '{{ course.object.location }}'
        });

        var course_detail="<div class='flexslider loading custom_space_remove' id='slide1'><ul class='slides'><li class='relative'><a class='family-member' href='{{course.object.get_absolute_url}}'>{% thumbnail course.object.image '1000' as im %}<img src='{{ im.url }}'/>{% endthumbnail %}</a></li>{% for image in course.object.course_images.all %}<li class='relative'><a href='{{course.object.get_absolute_url}}'>{% thumbnail image.image '1000x749' crop='center' as im %}<img src='{{ im.url }}'/>{% endthumbnail %}</a></li>{% endfor %}</ul></div>"

         makeInfoWindowEvent(map, infowindow, course_detail, marker);


        bounds.extend(marker.position);
        markers.push(marker);
    {% endif %}
{% endfor %}

function makeInfoWindowEvent(map, infowindow, contentString, marker) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });
    }

map.fitBounds(bounds);
});
</script>

除了加载图像外，它工作正常。当我点击谷歌地图标记时，它会向我显示带有完整 html 的信息窗口，但在图像位置上它只显示“ajax 加载图像/功能”，这意味着图像不是使用此代码加载的。

【问题讨论】：

标签： javascript jquery google-maps flexslider infowindow

【解决方案1】：

我不确定这是否适用于此，但在 Android 信息窗口中是 NOT a live view。从你所说的听起来好像信息窗口卡在显示加载中。也许您可以通过打开/关闭它或再次设置内容来刷新您的信息窗口。

【讨论】：

【解决方案2】：

将domready添加到标记

google.maps.event.addListener(infowindow, "domready", function() {
  $('#slider').anythingSlider();  });

【讨论】：