Question

问题：我正在尝试在Google地图的信息窗口中集成滑块（轮播）。

1。滑块的JQuery代码：

<head>
...
    <script src="js/jquery.anythingslider.js"></script>
    <script>
       // Set up Sliders
        // **************         
        $(function(){
            $('#mySlider').anythingSlider({
                mode                : 'f',   // fade mode - new in v1.8!
                resizeContents      : false, // If true, solitary images/objects in the panel will expand to fit the viewport
                expand              : true,
                navigationSize      : 3,     // Set this to the maximum number of visible navigation tabs; false to disable

                onSlideBegin: function(e,slider) {
                    // keep the current navigation tab in view
                    slider.navWindow( slider.targetPage );
                }
            });
        });
    </script>
  ...
 </head>

2。 Html代码。这是滑块在常规html页面中的工作方式：

 <div style="width:450px;height:150px;">        
    <ul id="mySlider">  <!-- id corresponds to id used in Jquery code  -->

       <li>
         Content of Slide 1
       </li>
       <li>
          Content of Slide 2
       </li>
       <li>
          Content of slide 3
       </li>

     </ul>
  </div>

现在，我对JavaScript没有太多经验，所以如何在信息窗口中访问jquery代码。换句话说，我应该把滑块代码放在哪里？

修改这是我到目前为止尝试但没有运气

(function() {  
// Defining variables that need to be available to some functions
var map, infoWindow;
window.onload = function() {
    // Creating a map
    var options = {
        zoom: 3,
        center: new google.maps.LatLng(37.09, -95.71),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), options);
    // Adding a marker to the map
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(40.756054, -73.986951),
        map: map,
        title: 'Click me'
    });
    google.maps.event.addListener(marker, 'click', function() {


        // add some content to userLi1 
        var userLi1 = '<li>Some awesome content for the 1st list item</li>';

        // add some content userLi2
        var userLi2 = '<li>Some awesome content for the 2nd list item</li>'


        // Check to see if an InfoWindow already exists
        if (!infoWindow) {
            infoWindow = new google.maps.InfoWindow();

        }


        // Setting the content of the InfoWindow to the detail map
        //infoWindow.setContent(detailDiv);

        infoWindow.setContent('<div style = "width:450px;height:150px;"><ul id="mySlider">' + userLi1 + userLi2 + '</ul></div>');

        // Opening the InfoWindow
        infoWindow.open(map, marker);   

    });

    // initiate slider here
    $('#mySlider').anythingSlider({
        mode                : 'f',   // fade mode - new in v1.8!
        resizeContents      : false, // If true, solitary images/objects in the panel will expand to fit the viewport
        expand              : true,
        navigationSize      : 3,     // Set this to the maximum number of visible navigation tabs; false to disable

        onSlideBegin: function(e,slider) {
            // keep the current navigation tab in view
            slider.navWindow( slider.targetPage );
        }
    });
};
})();

当我运行代码时，Jquery根本没有被触发。

编辑2：解决方案我通过使用McMaster代码并使用

包装相关的jquery代码解决了这个问题

 google.maps.event.addListener(infowindow, 'domready', function(){
 });

所以这是整个代码：

 $(document).ready(function() {   // runs jquery when document is ready

function initialize() {
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, {
        zoom: 3,
        center: new google.maps.LatLng(37.09, -95.71),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    infowindow = new google.maps.InfoWindow({
        content: "holding..."
    });

    // looks for map, when tiles are loaded, fire function addmarkers                 
    google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

}

function addMarkers() {
    var lat =37.09;
    var lng = -95-71;
    var latLng = new google.maps.LatLng(
        lat,
        lng);
    var marker = new google.maps.Marker({
        position: latLng,
        map: map
    });
    // add some content to userLi1
    var userLi1 = '<li>Some awesome content for the 1st list item</li>';

    // add some content userLi2
    var userLi2 = '<li>Some awesome content for the 2nd list item</li>'
    // set marker content
    marker.html = '<div style = "width:450px;height:150px;"><ul id="mySlider">' + userLi1 + userLi2 + '</ul></div>';
    // add listener
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(marker.html);
        infowindow.open(map, marker);
    });

}

initialize();      
google.maps.event.addListener(infowindow, 'domready', function(){
    // initiate slider here
    $('#mySlider').anythingSlider({
        mode                : 'f',   // fade mode - new in v1.8!
        resizeContents      : false, // If true, solitary images/objects in the panel will expand to fit the viewport
        expand              : true,
        navigationSize      : 3,     // Set this to the maximum number of visible navigation tabs; false to disable

        onSlideBegin: function(e,slider) {
            // keep the current navigation tab in view
            slider.navWindow( slider.targetPage );
        }
    });
}); 


});

Answer 1

您实际上是直接在文档上创建DOM元素

你需要使用这样的东西：

infoWindow.setContent('<div id="mySlider"><ul><li>' + userLi1 + '</li><li>' + userLi2 + '</li></ul></div>');

编辑：

这是从我的一个项目修改的完全可用的脚本，以满足您的需求：

$(document).ready(function() {   // runs jquery when document is ready

     function initialize() {
            var mapDiv = document.getElementById('map');
            map = new google.maps.Map(mapDiv, {
                 zoom: 3,
                center: new google.maps.LatLng(37.09, -95.71),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            infowindow = new google.maps.InfoWindow({
                content: "holding..."
            });

           // looks for map, when tiles are loaded, fire function addmarkers                 
            google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

          }

          function addMarkers() {
                var lat =37.09;
                var lng = -95-71;
              var latLng = new google.maps.LatLng(
                                                lat,
                                                lng);
              var marker = new google.maps.Marker({
                position: latLng,
                map: map
              });
             // add some content to userLi1 
            var userLi1 = '<li>Some awesome content for the 1st list item</li>';

            // add some content userLi2
            var userLi2 = '<li>Some awesome content for the 2nd list item</li>'
              // set marker content
              marker.html = '<div style = "width:450px;height:150px;"><ul id="slider2">' + userLi1 + userLi2 + '</ul></div>';
             // add listener 
             google.maps.event.addListener(marker, 'click', function() {
                    infowindow.setContent(marker.html);
                  infowindow.open(map, marker);
                });

          }

          initialize();      
          // initiate slider here
        $('#mySlider').anythingSlider({
            mode                : 'f',   // fade mode - new in v1.8!
            resizeContents      : false, // If true, solitary images/objects in the panel will expand to fit the viewport
            expand              : true,
            navigationSize      : 3,     // Set this to the maximum number of visible navigation tabs; false to disable

            onSlideBegin: function(e,slider) {
                // keep the current navigation tab in view
                slider.navWindow( slider.targetPage );
            }
        });

});

谷歌地图信息窗口内的滑块

1 个答案: