谷歌地图信息窗口中的 Raty Star 评级

Question

我在谷歌地图上添加了一些搜索结果的标记。

var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
    var contentString="";var image_path1="";
    contentString += '<div class="browse-map-venue" style="padding:5px;width: 230px;">';
        contentString += '<div class="rating" style="float: right; padding-right: 10px;">';
            contentString += '<script type="text/javascript" src="<?php echo base_url(); ?>media/front/js/jquery.raty.min.js"><\/script>';
            contentString += '<script>';
            contentString += '$(function() {';
            contentString += '$("#rating_fixed_rate_pop_'+ i +'").raty({';
            contentString += 'readOnly: true,';
            contentString += 'half: true,';
            contentString += 'start: '+ locations[i][6] +',';
            contentString += 'score: '+ locations[i][6] +',';
            contentString += 'path: "<?php echo base_url(); ?>media/front/img"';
            contentString += '});';
            contentString += '});';
            contentString += '<\/script> ';
            contentString += '<div id="rating_fixed_rate_pop_'+ i +'"></div>';
            contentString += '<a href="javascript:void(0);">'+ locations[i][7] +' reviews</a>';
            contentString += '</div>';
    contentString += '</div>';
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1],locations[i][2]),
        title: locations[i][3],
        info: contentString,
        map: map
    });

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

但是我需要添加星级评分，当我点击标记时不会应用到它。

注意：当我们从控制台编辑为评分编写的脚本时，在按下回车键后它会显示星星。但我只需要在信息窗口中单击标记时显示这些内容。

提前致谢！

Answer 1

1. 不使用字符串，而是使用节点来创建内容（以便能够通过 jQuery 轻松访问内容）
2. 将评分存储为特定节点的属性（以便能够使用单个函数来创建星星）

简单演示：

      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);

html,
body,
#map_canvas {
  height: 100%;
  margin: 0;
  padding: 0
}

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://raw.githubusercontent.com/wbotelhos/raty/master/lib/jquery.raty.js"></script>
<div id="map_canvas"></div>