谷歌地图，样式不适用于带有类的标记 img，但可以使用 img[src]

Question

我想为我的标记设置样式，它是一个 base64 字符串，如下所示

我已经按照这个答案来实现预期的结果，但这仅在我将整个源添加到 css 中时才有效，例如img[src="https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab.... (fiddle我在上面提到的答案中找到了）但是当我试图用类来定位它时，它不再工作了，我在地图加载后添加了类。

你可以在这里检查非工作小提琴

我的地图中有多个不同颜色的标记，这就是为什么我想以类为目标，谁能告诉我为什么不以类为目标，或者有什么更好的方法可以做到这一点？

Answer 1

在使用谷歌地图玩了一会儿之后，我发现它实际上在地图上嵌入了 2 次图标，因此它们彼此重叠。 这是使其与类一起使用的一种解决方案，用 div 包装 img 并将类添加到其中。

 function initialize() { var mapOptions = { center : new google.maps.LatLng(-34.397, 160.644), zoom : 8 }; var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions); var marker = new google.maps.Marker({ map : map, position : map.getCenter(), shape : { coords : [17, 17, 18], type : 'circle'}, icon : { url : 'https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab1020cd?s=32&d=identicon&r=PG&f=1', size : new google.maps.Size(34, 34) }, optimized : false }) google.maps.event.addListenerOnce(map, 'idle', function () { setTimeout(function () { $('#map-canvas img[src="'+marker.icon.url+'"]').eq(0).hide(); $('.gmnoprint > img').wrap( "<div class='in'></div>" ); }, 200); }); } google.maps.event.addDomListener(window, 'load', initialize);

 html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } .gmnoprint { opacity: 1 !important; } .in { border-radius:16px; border:1px solid #000 !important; overflow: hidden; position: absolute; width: 100%; height: 100%; box-sizing: border-box; } .in img { max-width: 100% !important; }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="map-canvas"></div>