javascript - 在Infowindow(Google Maps)中进行评估或评估

我正在尝试在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的新手。我尽力了，但我不知道为什么不起作用。
先感谢您。

最佳答案

发现我的错误：在插入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])

    }

无论如何，我仍然无法完成棘手的工作。每当我在“准备就绪”事件中调用它时，都会出现成千上万的星星，并且得分函数从未返回过“数据得分”属性。

无论如何，我找到了另一种方法，所以现在还可以。

谢谢。