jQuery Google Map 添加带有样式图像图标的标记

Question

我正在使用 jquery 移动 gmap 插件在谷歌地图中添加一个标记。我想在其中添加样式（类）。这怎么可能？普通图像图标工作正常 -

$('#map_canvas').gmap({'disableDefaultUI':false, 'zoom':15, 'callback': function() {
        var self = this;
        clientPosition = new google.maps.LatLng(34.0983425, -118.3267434);
        self.addMarker({
            position: clientPosition,
            icon: 'images/myImage.png',
            bounds: false
        });
        self.get('map').panTo(clientPosition);
    }});

我正在使用以下样式的圆形图像图标，它适用于普通图像 -

.icon_circle {
width:50px;
height:50px;
border-radius:100%;
border: 1px solid #07c;
box-shadow: 0 0 20px #07c;
}

我想使用与标记图标相同的样式。

Answer 1

原文：

我们通常会检查生成的 HTML 以获取类名（或至少是它的路径）并为此编写我们的 CSS。

如果我们找到一个名为 .gmap_icon_container 的东西，我们或许可以这样做：

.gmap_icon_container img {
  /* css here */
}

---

编辑：

按照我的建议，通过检查器爬行来访问谷歌地图标记有点困难（尽管可能，但并不可靠）

但是...如果您真的想设置这些样式，可以（我还没有测试过）使用 javascript google map API 设置自定义图标，然后访问该图标并设置通过 JQUERY 对其进行类，并使用 CSS 设置该类的样式。

通过 google api 设置标记：

var iconBase = 'http://myserver.com/images/mapicons';
var icons = {
  me: {
    icon: iconBase + 'mylocation.png'
  },
  others: {
    icon: iconBase + 'otherlocations.png'
  },
};

function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });
}

通过 JQUERY 获取类并设置其类：

$("img[src='http://myserver.com/images/mapicons/mylocation.png']")[0].addClass( "mylocation_icon" )
$("img[src='http://myserver.com/images/mapicons/otherlocations.png']").addClass( "otherlocations_icon" )

和css：

.mylocation_icon { /*css here*/ }
.otherlocations_icon { /*css here*/ }