Ruby on rails rails-gmap-根据默认标记类型在mouseOut上设置标记图标

我有一个rails应用程序，地图上有标记（粉色标记）。当我在侧边栏上的一个标记上鼠标时，它会将标记的颜色更改为蓝色（以在地图上显示），然后当我鼠标移出时，它会恢复为原来的粉红色。（效果很好）

但现在我添加了另一种颜色：当我点击一个标记（直接在地图上或边栏上）时，标记的颜色变成灰色。让我的用户知道他们已经检查了来自该标记的信息

因此，如果我现在在侧边栏的灰色标记上滑鼠，标记将变为蓝色（正常），但如果我滑鼠，则il将变为粉红色，并应保持灰色

如果粉红色变回粉红色 如果灰色回到灰色 我该怎么做？有一种属性

<script type="text/javascript">

  $(document).ready(function(){
    var raw_markers = <%=raw @hash.to_json %>;
    var input = (document.getElementById('pac-input'));
    var autocomplete = new google.maps.places.Autocomplete(input);

    function createSidebarLi(json){
      return json.sidebar;
      //return ("<li>" + json.titre + ' ' + json.address + "</li>");
    };

    function bindLiToMarker($li, marker){
      $li.on('click', function(){
        //handler.getMap().setZoom(14);
        marker.setMap(handler.getMap()); //because clusterer removes map property from marker
        marker.panTo();
        google.maps.event.trigger(marker.getServiceObject(), 'click');
      });
    };

    function bindLiToMarkerMouseOver($li, marker){
      $li.on('mouseover', function(){
        //handler.getMap().setZoom(14);
        marker.setMap(handler.getMap()); //because clusterer removes map property from marker
        marker.panTo();
        //google.maps.event.trigger(marker.getServiceObject(), 'click');
        marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerBleu.png");
      });
    };

    function bindLiToMarkerMouseOut($li, marker){
      $li.on('mouseout', function(){
        //handler.getMap().setZoom(14);
        marker.setMap(handler.getMap()); //because clusterer removes map property from marker
        marker.panTo();
        //google.maps.event.trigger(marker.getServiceObject(), 'click');
        **if (marker.isVisited = true) {
          marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerGris.png");
        } else {
          marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerRose.png");
        }**
      });
    };

    function createSidebar(json_array){
      _.each(json_array, function(json){
        var $li = $( createSidebarLi(json) );
        $li.appendTo('#markers_list');
        bindLiToMarker($li, json.marker);
        bindLiToMarkerMouseOver($li, json.marker);
        bindLiToMarkerMouseOut($li, json.marker);
      });
    };

    function closeInfoWindow(handler){
      if(handler.currentInfowindow()) {
        handler.currentInfowindow().close();
      }
    }

    handler = Gmaps.build('Google', { builders: { Marker: InfoBoxBuilder} });
    //handler = Gmaps.build('Google');
    handler.buildMap({ internal: {id: 'map'}}, function(){

      var markers = handler.addMarkers(raw_markers);

      _.each(raw_markers, function(json, index){
        var marker = markers[index];
        json.marker = marker;
        //google.maps.event.addListener(marker.getServiceObject(), 'mouseover', function(){
          //google.maps.event.trigger(marker.getServiceObject(), 'click');
        //});
        google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
          marker.serviceObject.setIcon("http://198.100.149.26/lookn/markerGris.png");
          **marker.isVisited = true;**
        });
      });

      createSidebar(raw_markers);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.centerMapOnUser();

      google.maps.event.addListener(handler.getMap(), 'click', function(){ 
        closeInfoWindow(handler);
      });

      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();
      });

    });

  });

</script>

$（文档）.ready（函数（）{
var raw_标记=；
var输入=（document.getElementById（'pac-input'）；
var autocomplete=new google.maps.places.autocomplete（输入）；
函数createSidebarLi（json）{
返回json.sidebar；
//返回（“
”+json.titre+”+json.address+”
”；
};
函数bindLiToMarker（$li，marker）{
$li.on（'click'，function（）{
//handler.getMap（）.setZoom（14）；
marker.setMap（handler.getMap（））；//因为cluster从marker中删除map属性
marker.panTo（）；
google.maps.event.trigger（marker.getServiceObject（），'click'）；
});
};
函数bindLiToMarkerMouseOver（$li，marker）{
$li.on（'mouseover'，function（）{
//handler.getMap（）.setZoom（14）；
marker.setMap（handler.getMap（））；//因为cluster从marker中删除map属性
marker.panTo（）；
//google.maps.event.trigger（marker.getServiceObject（），'click'）；
marker.serviceObject.setIcon（“http://198.100.149.26/lookn/markerBleu.png");
});
};
函数bindLiToMarkerMouseOut（$li，marker）{
$li.on（'mouseout'，function（）{
//handler.getMap（）.setZoom（14）；
marker.setMap（handler.getMap（））；//因为cluster从marker中删除map属性
marker.panTo（）；
//google.maps.event.trigger（marker.getServiceObject（），'click'）；
**如果（marker.isvisted=true）{
marker.serviceObject.setIcon（“http://198.100.149.26/lookn/markerGris.png");
}否则{
marker.serviceObject.setIcon（“http://198.100.149.26/lookn/markerRose.png");
}**
});
};
函数createSidebar（json_数组）{
_.each（json_数组、函数（json）{
var$li=$（createSidebarLi（json））；
$li.appendTo（“#markers_list”）；
bindLiToMarker（$li，json.marker）；
bindLiToMarkerMouseOver（$li，json.marker）；
bindLiToMarkerMouseOut（$li，json.marker）；
});
};
函数closeInfoWindow（处理程序）{
if（handler.currentInfowindow（））{
handler.currentInfowindow（）.close（）；
}
}
handler=Gmaps.build（'Google'，{builders:{Marker:InfoBoxBuilder}}）；
//handler=Gmaps.build（'Google'）；
buildMap（{internal:{id:'map'}}，function（）{
var markers=handler.addMarkers（原始标记）；
_.each（原始标记、函数（json、索引）{
var标记=标记[索引]；
json.marker=marker；
//google.maps.event.addListener（marker.getServiceObject（），'mouseover'，function（））{
//google.maps.event.trigger（marker.getServiceObject（），'click'）；
//});
google.maps.event.addListener（marker.getServiceObject（），'click'，function（））{
marker.serviceObject.setIcon（“http://198.100.149.26/lookn/markerGris.png");
**marker.isvisted=true**
});
});
createSidebar（原始_标记）；
handler.bounds.extendWith（markers）；
handler.fitMapToBounds（）；
handler.centerMapOnUser（）；
google.maps.event.addListener（handler.getMap（），'click'，function（）{
关闭信息窗口（处理程序）；
});
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place=autocomplete.getPlace（）；
});
});
});

单击事件时设置已访问=真：

google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
          marker.serviceObject.set("isVisited", true);
        });

如果访问=真鼠标输出设置图标灰色，否则设置图标粉红色

function bindLiToMarkerMouseOut($li, marker){
      $li.on('mouseout', function(){
        marker.setMap(handler.getMap());
        if (marker.serviceObject.get("isVisited")) {
          marker.serviceObject.setIcon("path_to/greyMarker.png");
        } else {
          marker.serviceObject.setIcon("path_to/pinkMarker.png");
        };
      });
    };

---

您必须在单击事件时保存标记的状态，例如

marker.isvisted=true

。并检查mouseout事件的状态。如果为true，则设置灰色图标。如果没有，请设置pink icon.agreed，不要忘记您可以在json中放入所需的任何属性，然后您可以在logicThx中获得帮助。我编辑了代码，但它不适用于Marker.isVisited，我还能做些什么吗？创建一个plunkr来获取js帮助，这对每个人来说都很容易，你可以分叉这个例子：我创建了一个：