Google Map，样式不适用于带有类的标记img，但可以使用img [src]

debugcn 发表于 Dev

丹麦阿黛尔

我想给我的标记设置样式，它是一个base64字符串，像这样

我已经按照这个答案来达到预期的结果，但是只有当我在css中添加整个源代码img[src="https://www.gravatar.com/avatar/0a9745ea7ac5c90d7acadb02ab.... （在上面提到的答案中找到的小提琴）时，这个方法才起作用，但是当我尝试以类为目标时，它不起作用再说一遍，我在地图加载后添加了该类。

您可以在这里检查无效的小提琴

我的地图上有多个具有不同颜色的标记，这就是为什么我要针对课程，有人可以告诉我为什么不针对课程的原因，还是有更好的方法呢？

博扬·佩特科夫斯基（Bojan Petkovski）

在玩了一段时间的Google地图后，我发现它实际上将图标嵌入了2次在地图上，因此它们彼此重叠。这是使其与类一起使用的解决方案，将img用div包装并向其添加类。

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。