Question

我知道这个问题与尺寸有关，但不知怎的，我无法解决。

Here是我正在处理的链接。

如果您转到顶部的“位置”标签，然后点击，则可以在 safari 中看到，有完全灰色的区域，在其他浏览器中，如果单击“位置”选项卡后，不要移动鼠标，否则“地图”将部分灰色。

对于其他浏览器，

我使用下面的代码来解决灰色区域问题：

$("#mega-menu-item-581").mouseover(function(){
    $("#menuLocateStore").focus();
    google.maps.event.trigger(menuMap, 'resize');
});

但在野生动物园中，不知道如何解决它。任何人都可以指导我吗？

即使我尝试在mouseover事件之后初始化也没有任何成功。

我尝试过的其他事情是在超时后初始化，但仍然没有给我带来任何成功。

我正在使用的代码被添加到snippest中。

＆＃13;

var searchStoreField = document.getElementById('menuLocateStore');

var autocomplete = new google.maps.places.Autocomplete(searchStoreField); //Autocomplete the address
	
var menu_geocoder, menu_map, menu_infoWindow, menu_directionsDisplay, menu_directionsService, menu_geolocationLatlng, menu_markerClusterer,
	menu_markersArray = [],
	menu_directionMarkerPosition = {},
	menu_mapDefaults = {},
	menu_resetMap = false,
	menu_streetViewAvailable = false,
	menu_startMarkerData,
	menu_startAddress,
	menu_autoLoad = true,
	menu_startLatLng;	

function initializeMenuMap() {
	var menu_myOptions, menu_zoomControlPosition, menu_zoomControlStyle, menu_latLng, menu_zoomLevel, menu_mapType, menu_streetViewVisible;
	
	/* If no zoom location is defined, we show the entire world */	
	menu_startLatLng = new google.maps.LatLng( 57.758665, -101.705156 );
	menu_zoomLevel	= 12;


	menu_geocoder	      = new google.maps.Geocoder();
	menu_infoWindow		  = new google.maps.InfoWindow();
	menu_directionsDisplay = new google.maps.DirectionsRenderer();
	menu_directionsService = new google.maps.DirectionsService();

	/* Set correct the position of the controls */		
	menu_zoomControlPosition = google.maps.ControlPosition.RIGHT_CENTER


	/* Set correct control style */	
	menu_zoomControlStyle = google.maps.ZoomControlStyle.SMALL

	/* Set the selected map type */
	menu_mapType = google.maps.MapTypeId.ROADMAP

	menu_myOptions = {
		zoom: menu_zoomLevel,
		center: menu_startLatLng,
		mapTypeId: menu_mapType,
		// mapTypeControl: true,
		// mapTypeControlOptions: {
			// style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
			// position: google.maps.ControlPosition.BOTTOM_CENTER
		// },
		//panControl: false,
		//streetViewControl: false,
		//zoomControl: true,
		zoomControlOptions: {
			style: menu_zoomControlStyle,
			position: menu_zoomControlPosition
		},
		//scaleControl: true,
	};

	menu_map = new google.maps.Map( document.getElementById( "menuMap" ), menu_myOptions );
	
}
	
function addMarker( latLng, storeId, infoWindowData, draggable ) {
	var menu_markerPath, menu_mapIcon, menu_marker, 
		keepStartMarker = false;
	
	// if ( storeId === 0 ) {
		// markerPath = wpslSettings.path + "img/markers/" + wpslSettings.startMarker;
	// } else {
		// markerPath = wpslSettings.path + "img/markers/" + wpslSettings.storeMarker;
	// }
	
	// mapIcon = {
		// url: markerPath,
		// scaledSize: new google.maps.Size( 24,35 ), //retina format
		// origin: new google.maps.Point( 0,0 ),  
		// anchor: new google.maps.Point( 12,35 )
	// };
	
    menu_marker = new google.maps.Marker({
		position: latLng,
		map: menu_map,
		optimized: false, //fixes markers flashing while bouncing
		title: infoWindowData.store,
		draggable: draggable,
		storeId: storeId,
	});	
		
    /* Store the marker for later use */
    menu_markersArray.push( menu_marker );	
	
    google.maps.event.addListener( menu_marker, "click", function() {
		//setInfoWindowContent( menu_marker, createInfoWindowHtml( infoWindowData, storeId, menu_streetViewAvailable ) );
    });

}

function createInfoWindowHtml( infoWindowData, storeId, streetViewAvailable ) {
    var storeHeader, url, 
		address2 = "",
		newWindow = "",
		streetView = "",
		zoomTo = "",
		windowContent = "<div data-store-id='" + storeId + "'>";
    
		
		
		windowContent += "<a class='infoWindowStore' href='/?page_id=579&store_id="+storeId+"'>"+infoWindowData.store+"</a>";	
		windowContent += "</div>";

    return windowContent;
}

function setInfoWindowContent( marker, InfoWindowContent ) {
	menu_infoWindow.setContent( InfoWindowContent );
	menu_infoWindow.open( menu_map, marker );
}

function fitBounds() {
    var i, markerLen, 
		maxZoom = 12,
		bounds = new google.maps.LatLngBounds();

    /* Make sure we don't zoom to far */
    google.maps.event.addListenerOnce( menu_map, "bounds_changed", function( event ) {
		if ( this.getZoom() > maxZoom ) {
			this.setZoom( maxZoom );
		}
    });

    for ( i = 0, markerLen = menu_markersArray.length; i < markerLen; i++ ) {
		bounds.extend ( menu_markersArray[i].position );
    }

    menu_map.fitBounds( bounds );
}

function deleteOverlays( keepStartMarker ) {
	var markerLen, i, keepStartMarker=false;
    menu_directionsDisplay.setMap( null );
	
    /* Remove all the markers from the map, and empty the array */
    if ( menu_markersArray ) {
		for ( i = 0, markerLen = menu_markersArray.length; i < markerLen; i++ ) {			
			/* Check if we need to keep the start marker, or remove everything */
			if ( keepStartMarker ) {
				if ( menu_markersArray[i].draggable != true ) {
					menu_markersArray[i].setMap( null );
				} else {
					startMarkerData = menu_markersArray[i];
				}
			} else {
				menu_markersArray[i].setMap( null );
			}
		}

		menu_markersArray.length = 0;
    }
}

/* Trigger the search when the user presses "enter" on the keyboard */
$( "#menuLocateStore" ).keydown( function ( event ) {
    var keypressed = event.keyCode || event.which;
	
    if ( keypressed == 13 ) {
		$( ".locateButton" ).trigger( "click" );
    }
});

$(".locateButton").click(function(){
	
	var keepStartMarker=false;
	deleteOverlays(keepStartMarker);

	var geocoder = new google.maps.Geocoder();
	
	var address = $("#menuLocateStore").val();

	geocoder.geocode( { 'address': address}, function(results, status) {

		if (status == google.maps.GeocoderStatus.OK) {
			var latitude = results[0].geometry.location.lat();
			var longitude = results[0].geometry.location.lng();
			var mapData = {
				action: "search_store",
				lat: latitude,
				lng: longitude
			};
	
			var draggable=false;
			$.get( ajaxurl, mapData, function( response ) {
				if ( response.success !== false ) {
					if ( response.length > 0 ) {
				
						$.each( response, function( index ) {
							infoWindowData = {
												store: response[index].store,
												address: response[index].address,
												address2: response[index].address2,
												city: response[index].city,
												country: response[index].country,
												state: response[index].state,
												zip: response[index].zip,
												description: response[index].description,
												phone: response[index].phone,
												fax: response[index].fax,
												url: response[index].url,
												email: response[index].email,
												hours: response[index].hours,
												thumb: response[index].thumb
											};

							latLng = new google.maps.LatLng( response[index].lat, response[index].lng );	
							addMarker( latLng, response[index].id, infoWindowData, draggable );						
						});
						fitBounds();
					}
					else{
						alert("No stores are near 50 Km from the address you have entered.");
					}	
				}
				else{
					alert("There is some problem. Please try after some time.");
				}
			});				
		}
		else{
			alert("sorry! There is Error !!!");
		}
	});	
});

google.maps.event.addDomListener( window, "load", initializeMenuMap );

＆＃13;

EDITED

当我检查tileloaded时，那时它正在显示tileloaded。

如果加载了瓷砖，那为什么它会显示我在safari中的灰色区域？

EDITED

好的，当我登录网络时，我发现所有的瓷砖都在下载并完善。那么灰色区域的问题可能是什么？

Answer 1

试试这段代码：

$("#mega-menu-item-581").mouseover(function(){
    $("#menuLocateStore").focus();
    initializeMenuMap();
});

Google Map未按预期运行

1 个答案: