Question

我正在尝试使用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 loading image / function'，表示图像未使用此代码加载。

Answer 1

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

Answer 2

为标记添加domready

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

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

2 个答案: