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

Question

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

我已经按照this answer 达到了预期的结果，但这仅在我将整个源代码添加到 img[src="https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab.... (fiddle which I found in above mentioned answer) 之类的 css 中时才有效，但是当我尝试使用类来定位它时，它不起作用现在，我在加载地图后添加类。

您可以检查非工作小提琴here

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

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>