如何在 Google 地图 V3 图标上添加 CSS 边框

Question

我想在Google地图图标上添加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>

- Chen YangHuang

---

既然您已经在添加自定义图标，为什么不直接给图标本身添加边框呢？ - ScottE

我想实现鼠标点击高亮效果，例如：http://www.geophotoshow.com/flickr/ - Chen YangHuang

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事件。 当然这不是非常灵活的...

- ScottE

Answer 2

你有两个选择：

1）为所有图标生成两个图像，一个没有边框，另一个有边框，然后在单击时交换MarkerIcon。

2）如ScottE所说，使用CustomOverlay，它基本上允许您在LatLng点上放置HTML，然后您可以添加点击侦听器以应用/删除样式到覆盖层。

- skarE

Answer 3

使用 MarkerWithLabel for V3，您可以对标记应用样式（和自定义标签）。他们的示例 展示了带边框的基本用法。

<!-- language: lang-css -->
 <style type="text/css">
   .labels {
     text-align: center;
     width: 40px;     
     border: 2px solid black;
   }
 </style>

还有JS

<!-- language: lang-js -->
 var latLng = new google.maps.LatLng(49.47805, -123.84716);

 var map = new google.maps.Map(document.getElementById('map_canvas'), {
   zoom: 12,
   center: latLng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var marker = new MarkerWithLabel({
   position: latLng,
   draggable: false,
   map: map,
   labelContent: "hello world",
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   labelStyle: {opacity: 0.75}
 });

- ow3n

Answer 4

我认为你最好将边框作为原始图标图像的一部分，因为(a)你现在无法知道img元素的id/class以应用CSS，(b)即使你可以，它也会是一个矩形边框，这可能不是理想的。

- miguev

Answer 5

$("#map_canvas").css({border: '1px solid silver'})

- Yorgo

---

谢谢您的回答。但是不是 #map_canvas。我想要添加图像（图标）。 - Chen YangHuang

Answer 6

基本上你需要使用样式化的谷歌地图。在这里可以看到一个示例

- defau1t