javascript - Google map 中奇怪的缩放按钮样式。有人有什么想法吗？

Question

我在 map 上使用 google map JS api。这是一个 wordpress 网站。我正在将谷歌地图添加到联系人页面模板。但是，确实有一些奇怪的事情。放大和缩小按钮样式不是 + 和 -。有人有什么想法吗？我怎样才能拥有默认的+ - 按钮？ JS fiddle for the Google Map Codes:

var map;
	function initialize() {

		var mapOptions = {
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			mapTypeControl: false,
			zoom: <?php echo $map_zoom;?>,
			zoomControl: true,
			scrollwheel: false,
			zoomControlOptions: {
				style: google.maps.ZoomControlStyle.DEFAULT,
				position: google.maps.ControlPosition.DEFAULT
			},
			panControl: false,
			streetViewControl: false,
			scaleControl: false,
			overviewMapControl: false,
			center: new google.maps.LatLng(<?php echo $contact_info['map']['lat'];?>,<?php echo $contact_info['map']['lng'];?>)
		};

		map = new google.maps.Map(document.getElementById('map-canvas'),
			mapOptions);

		var infoContent = '<div class="window-content"><h4><?php echo bloginfo('name');?></h4><div class="contact-address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><?php if(isset($contact_info['address_1']) ):?><span itemprop="streetAddress"><?php echo $contact_info['address_1'];?><?php if(isset($contact_info['address_2']) ):?>,<br/><?php echo $contact_info['address_2']; ?> <?php endif;?></span><br/><?php endif;?><?php if(isset($contact_info['city']) ):?><span itemprop="addressLocality"><?php echo $contact_info['city'];?></span>&nbsp;<?php endif;?><?php if(isset($contact_info['postcode']) ):?><span itemprop="postalCode"><?php echo $contact_info['postcode'];?></span>&nbsp;<?php endif;?><?php if(isset($contact_info['state']) ):?><span itemprop="addressRegion"><?php echo $contact_info['state'];?></span><?php endif;?><?php if(isset($contact_info['country']) ):?><br/><span itemprop="addressCountry"><?php echo $contact_info['country'];?></span><?php endif;?></div></div>';

		var infowindow = new google.maps.InfoWindow({
			content: infoContent
		});

		var icon = {
			path: 'M16.5,51s-16.5-25.119-16.5-34.327c0-9.2082,7.3873-16.673,16.5-16.673,9.113,0,16.5,7.4648,16.5,16.673,0,9.208-16.5,34.327-16.5,34.327zm0-27.462c3.7523,0,6.7941-3.0737,6.7941-6.8654,0-3.7916-3.0418-6.8654-6.7941-6.8654s-6.7941,3.0737-6.7941,6.8654c0,3.7916,3.0418,6.8654,6.7941,6.8654z',
			anchor: new google.maps.Point(16.5, 51),
			fillColor: '<?php echo $map_marker_colour;?>',
			fillOpacity: 0.6,
			strokeWeight: 0,
			scale: 1
		};

		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(<?php echo $contact_info['map']['lat'];?>,<?php echo $contact_info['map']['lng'];?>),
			map: map,
			icon: icon,
			title: 'marker'
		});

		google.maps.event.addListener(marker, 'click', function() {
			infowindow.open(map,marker);
		});
	}

	google.maps.event.addDomListener(window, 'load', initialize);

Screenshot

Answer 1

只是为了确保在您制作自己的样式时，不要让任何 img 样式覆盖 google map img 样式。 默认是 .gm-style img{ max-width: none; 如果你必须在某些 img 标签上使用 !important， 然后使用:.gm-style img{ max-width: none !important; } 修复。