javascript - 谷歌地图，样式不适用于带类的标记 img，但适用于 img[src]

Question

我想为我的标记设置样式，它是一个 base64 字符串，类似这样

我关注了this answer以达到预期的结果，但这仅在我将整个源代码添加到 css 中时才有效(fiddle which I found in above mentioned answer) 但是当我试图用类定位它时，它不再工作了，我在加载 map 后添加类。

您可以检查非工作 fiddle here

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

Answer 1

在玩了一会儿谷歌地图后，我发现它实际上在 map 上嵌入了 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>