jquery - 如何在谷歌地图 v3 图标上添加 css 边框

Question

我想在谷歌地图图标上添加 css 边框。

但是我不知道，我该怎么办？

这是我的代码!请...!

http://fiddle.jshell.net/yX7ce/9/

<script type="text/javascript">
      function initialize() {
        var myOptions = {
          zoom: 4,
          center: new google.maps.LatLng(-25.363882, 131.044922),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

        var marker = new google.maps.Marker({
          position: map.getCenter(),
          map: map,
          title: 'Click to zoom',
          icon: 'images/a01.jpg'
        });

        google.maps.event.addListener(marker, 'click', function() {
          if (map.getZoom() == 8) {
            map.setZoom(4);
          } else {
            map.setZoom(8);
          }
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Answer 1

您可能已经注意到，没有方便的方法向图标添加属性以允许您通过 css 访问它们。

真正的解决方案是创建充当图标的自定义叠加层:

http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

这是相当密集的。

在您的情况下，简单快速但肮脏的解决方案是使用 jquery 查找与您的自定义图标匹配的属性 = 'http://farm8.staticflickr.com/7033/6790615621_504e654272_s.jpg' - 并监听 mouseover/mouseout事件。这当然不是很灵活...