javascript - 信息窗口中的 Rateit 或 Raty(Google map )

Question

我正在尝试在 Google Maps API 版本 3 的信息窗口内实现评级系统。

我尝试了 Rateit 和 Raty，但都无法使它们工作。

我在这里尝试了这段代码，但它对我不起作用:

 function initialize() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(2, 2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      },
      map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions),
      locations = [
        [null, 1, 1, 'title#1', null, null, 1.3, 'foo'],
        [null, 2, 2, 'title#2', null, null, 3.7, 'bar'],
        [null, 3, 3, 'title#3', null, null, 4.3, 'boofar']
      ],
      infowindow = new google.maps.InfoWindow(),
      i;
    //use the domready-event of the infowindow to execute $.raty
    google.maps.event.addListener(infowindow, 'domready', function() {
      $(this.getContent()).find('.stars').raty({
        half: true,
        score: function() {
          return $(this).attr('data-score');
        },
        readOnly: true,
        path: 'https://raw.githubusercontent.com/wbotelhos/raty/master/demo/images/'
      });
    });
    for (i = 0; i < locations.length; i++) {
      (function(location) {
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(location[1], location[2]),
          title: location[3],
          map: map,
          info: $('<div/>')
            //the rating
            .append($('<div class="stars"></div>').attr('data-score', location[6]))
            //review-link
            .append($('<a href="javascript:void(0);">' + locations[i][7] + ' reviews</a>'))
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(this.info[0]);
          infowindow.open(map, this);
        });
      }(locations[i]))






    }
  }

  google.maps.event.addDomListener(window, 'load', initialize);

这是我的代码以及到目前为止我所做的事情。

脚本:

<!-- Load libraries -->
<script src="js/jquery-1.12.1.min.js"></script>
<script src="js/jquery.raty.js"></script>
<!-- Google Maps API tag -->
 <script src="https://maps.googleapis.com/maps/api/js?v=3">
</script>

<script type="text/javascript">
   window.addEventListener("load",function() {
      // Set a timeout...
      setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
      }, 0);
    });
   $('.search-box,.menu' ).hide();   
   $('.options li:first-child').click(function(){   
        $(this).toggleClass('active');  
        $('.search-box').toggle();                  
        $('.menu').hide();          
        $('.options li:last-child').removeClass('active'); 
   });
   $('.options li:last-child').click(function(){
        $(this).toggleClass('active');                  
        $('.menu').toggle();        
        $('.search-box').hide(); 
        $('.options li:first-child').removeClass('active');         
   });
   $('.content').click(function(){
        $('.search-box,.menu' ).hide();   
        $('.options li:last-child, .options li:first-child').removeClass('active');
   });
</script>



<!-- Google Maps Script -->
<script type="text/javascript">
function initMap() {
  // Create a map object and specify the DOM element for display.

  var zoomlevel = 10;
  var abudhabi = {lat:24.373368, lng:54.488754};

  var map = new google.maps.Map(document.getElementById('map'), {
    center: abudhabi,
    scrollwheel: false,
    zoom: zoomlevel
  });



  // Load up markers with their labels and infos.
  //Test variables:
    var locations = [
        ['McGettigan \'s Irish Pub',24.438533,54.572991,2],
        ['Cooper\'s',24.4238,54.473619,3]

    ];
    var infowindow = new google.maps.InfoWindow();

    //on infowindow load -> read data and display stars
    google.maps.event.addListener(infowindow, 'domready', function() {
          $(this.getContent()).find('.stars').raty({
            score: function() {
              return $(this).attr('data-score'); // THIS DOESN'T RETURN ANY VALUE...
            },
            readOnly: true,
            path: 'images/' //this is my path for the images, they are fine...
          });
    });

    for (var i=0; i<locations.length; i++){
        (function(location){
            var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[1], location[2]),
            title: location[0],
            map: map,
            info: $('<div/>')
                .append($('<div class="stars"></div>').attr('data-score', location[3]))
            });
            // Add event listener on marker -> open info
            google.maps.event.addListener(marker, 'click',function(){
                infowindow.setContent(this.info[0]);
                infowindow.open(map,this);
            }); 
            })(locations[i])

    }


}

google.maps.event.addDomListener(window,'load',initMap);

</script>

raty.js 正在返回(第 1 行错误): 错误:选择器无效!

非常感谢您的帮助，我是 javascript 和 jquery 的新手。我很努力，但我不明白为什么不起作用。预先感谢您。

Answer 1

发现我的错误:在我插入 div 标签以供读取之前，Rateit 脚本正在运行。我在这里错过了一个基本概念。解决方案是这样的:

var infowindow = new google.maps.InfoWindow();

    //on infowindow load -> read data and display stars
    google.maps.event.addListener(infowindow, 'domready', function() {
        $("#info").rateit(); //HERE IS THE TRICK (CALL RATEIT AGAIN)
    });

    for (var i=0; i<locations.length; i++){
        (function(location){
            var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[1], location[2]),
            title: location[0],
            map: map,
            });
            // Add event listener on marker -> open info
            google.maps.event.addListener(marker, 'click',function(){
                var content = '<div class="rateit"'+
                ' data-rateit-value="'+ location[3] +
                '" data-rateit-ispreset="true" data-rateit-readonly="true"'+
                ' id="info"></div>';
                infowindow.open(map,this);
                infowindow.setContent(content);

            }); 
            })(locations[i])

    }

无论如何，我还是无法完成工作。每次我在“domready”事件中调用它时，都会出现大量星星，并且得分函数从未返回属性“data-score”..

无论如何，我找到了另一种方法，所以现在没问题。

谢谢。