1
我知道這個問題與大小有關,但不知何故我無法解決它。谷歌地圖不按預期工作
Here是我工作的鏈接。
如果你到頂部的位置選項卡,並在其上點擊,那麼你就可以看到野生動物園,也完全是灰色地帶,在其他瀏覽器中,如果你不點擊後移動鼠標位置標籤,然後地圖將部分灰色。
對於其他瀏覽器,
我使用下面的代碼來解決灰色地帶的問題:
$("#mega-menu-item-581").mouseover(function(){
$("#menuLocateStore").focus();
google.maps.event.trigger(menuMap, 'resize');
});
但在Safari中,不知道如何解決it.Can任何人指導我在這?
即使我試圖在mouseover事件之後初始化沒有任何成功。
我試過的其他事情是在超時後初始化,但仍然沒有給我任何成功。
我正在使用的代碼被添加到snippest中。
var searchStoreField = document.getElementById('menuLocateStore');
var autocomplete = new google.maps.places.Autocomplete(searchStoreField); //Autocomplete the address
\t
var menu_geocoder, menu_map, menu_infoWindow, menu_directionsDisplay, menu_directionsService, menu_geolocationLatlng, menu_markerClusterer,
\t menu_markersArray = [],
\t menu_directionMarkerPosition = {},
\t menu_mapDefaults = {},
\t menu_resetMap = false,
\t menu_streetViewAvailable = false,
\t menu_startMarkerData,
\t menu_startAddress,
\t menu_autoLoad = true,
\t menu_startLatLng; \t
function initializeMenuMap() {
\t var menu_myOptions, menu_zoomControlPosition, menu_zoomControlStyle, menu_latLng, menu_zoomLevel, menu_mapType, menu_streetViewVisible;
\t
\t /* If no zoom location is defined, we show the entire world */ \t
\t menu_startLatLng = new google.maps.LatLng(57.758665, -101.705156);
\t menu_zoomLevel \t = 12;
\t menu_geocoder \t = new google.maps.Geocoder();
\t menu_infoWindow \t \t = new google.maps.InfoWindow();
\t menu_directionsDisplay = new google.maps.DirectionsRenderer();
\t menu_directionsService = new google.maps.DirectionsService();
\t /* Set correct the position of the controls */ \t \t
\t menu_zoomControlPosition = google.maps.ControlPosition.RIGHT_CENTER
\t /* Set correct control style */ \t
\t menu_zoomControlStyle = google.maps.ZoomControlStyle.SMALL
\t /* Set the selected map type */
\t menu_mapType = google.maps.MapTypeId.ROADMAP
\t menu_myOptions = {
\t \t zoom: menu_zoomLevel,
\t \t center: menu_startLatLng,
\t \t mapTypeId: menu_mapType,
\t \t // mapTypeControl: true,
\t \t // mapTypeControlOptions: {
\t \t \t // style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
\t \t \t // position: google.maps.ControlPosition.BOTTOM_CENTER
\t \t // },
\t \t //panControl: false,
\t \t //streetViewControl: false,
\t \t //zoomControl: true,
\t \t zoomControlOptions: {
\t \t \t style: menu_zoomControlStyle,
\t \t \t position: menu_zoomControlPosition
\t \t },
\t \t //scaleControl: true,
\t };
\t menu_map = new google.maps.Map(document.getElementById("menuMap"), menu_myOptions);
\t
}
\t
function addMarker(latLng, storeId, infoWindowData, draggable) {
\t var menu_markerPath, menu_mapIcon, menu_marker,
\t \t keepStartMarker = false;
\t
\t // if (storeId === 0) {
\t \t // markerPath = wpslSettings.path + "img/markers/" + wpslSettings.startMarker;
\t // } else {
\t \t // markerPath = wpslSettings.path + "img/markers/" + wpslSettings.storeMarker;
\t // }
\t
\t // mapIcon = {
\t \t // url: markerPath,
\t \t // scaledSize: new google.maps.Size(24,35), //retina format
\t \t // origin: new google.maps.Point(0,0),
\t \t // anchor: new google.maps.Point(12,35)
\t // };
\t
menu_marker = new google.maps.Marker({
\t \t position: latLng,
\t \t map: menu_map,
\t \t optimized: false, //fixes markers flashing while bouncing
\t \t title: infoWindowData.store,
\t \t draggable: draggable,
\t \t storeId: storeId,
\t }); \t
\t \t
/* Store the marker for later use */
menu_markersArray.push(menu_marker); \t
\t
google.maps.event.addListener(menu_marker, "click", function() {
\t \t //setInfoWindowContent(menu_marker, createInfoWindowHtml(infoWindowData, storeId, menu_streetViewAvailable));
});
}
function createInfoWindowHtml(infoWindowData, storeId, streetViewAvailable) {
var storeHeader, url,
\t \t address2 = "",
\t \t newWindow = "",
\t \t streetView = "",
\t \t zoomTo = "",
\t \t windowContent = "<div data-store-id='" + storeId + "'>";
\t \t
\t \t
\t \t windowContent += "<a class='infoWindowStore' href='/?page_id=579&store_id="+storeId+"'>"+infoWindowData.store+"</a>"; \t
\t \t windowContent += "</div>";
return windowContent;
}
function setInfoWindowContent(marker, InfoWindowContent) {
\t menu_infoWindow.setContent(InfoWindowContent);
\t menu_infoWindow.open(menu_map, marker);
}
function fitBounds() {
var i, markerLen,
\t \t maxZoom = 12,
\t \t bounds = new google.maps.LatLngBounds();
/* Make sure we don't zoom to far */
google.maps.event.addListenerOnce(menu_map, "bounds_changed", function(event) {
\t \t if (this.getZoom() > maxZoom) {
\t \t \t this.setZoom(maxZoom);
\t \t }
});
for (i = 0, markerLen = menu_markersArray.length; i < markerLen; i++) {
\t \t bounds.extend (menu_markersArray[i].position);
}
menu_map.fitBounds(bounds);
}
function deleteOverlays(keepStartMarker) {
\t var markerLen, i, keepStartMarker=false;
menu_directionsDisplay.setMap(null);
\t
/* Remove all the markers from the map, and empty the array */
if (menu_markersArray) {
\t \t for (i = 0, markerLen = menu_markersArray.length; i < markerLen; i++) { \t \t \t
\t \t \t /* Check if we need to keep the start marker, or remove everything */
\t \t \t if (keepStartMarker) {
\t \t \t \t if (menu_markersArray[i].draggable != true) {
\t \t \t \t \t menu_markersArray[i].setMap(null);
\t \t \t \t } else {
\t \t \t \t \t startMarkerData = menu_markersArray[i];
\t \t \t \t }
\t \t \t } else {
\t \t \t \t menu_markersArray[i].setMap(null);
\t \t \t }
\t \t }
\t \t 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;
\t
if (keypressed == 13) {
\t \t $(".locateButton").trigger("click");
}
});
$(".locateButton").click(function(){
\t
\t var keepStartMarker=false;
\t deleteOverlays(keepStartMarker);
\t var geocoder = new google.maps.Geocoder();
\t
\t var address = $("#menuLocateStore").val();
\t geocoder.geocode({ 'address': address}, function(results, status) {
\t \t if (status == google.maps.GeocoderStatus.OK) {
\t \t \t var latitude = results[0].geometry.location.lat();
\t \t \t var longitude = results[0].geometry.location.lng();
\t \t \t var mapData = {
\t \t \t \t action: "search_store",
\t \t \t \t lat: latitude,
\t \t \t \t lng: longitude
\t \t \t };
\t
\t \t \t var draggable=false;
\t \t \t $.get(ajaxurl, mapData, function(response) {
\t \t \t \t if (response.success !== false) {
\t \t \t \t \t if (response.length > 0) {
\t \t \t \t
\t \t \t \t \t \t $.each(response, function(index) {
\t \t \t \t \t \t \t infoWindowData = {
\t \t \t \t \t \t \t \t \t \t \t \t store: response[index].store,
\t \t \t \t \t \t \t \t \t \t \t \t address: response[index].address,
\t \t \t \t \t \t \t \t \t \t \t \t address2: response[index].address2,
\t \t \t \t \t \t \t \t \t \t \t \t city: response[index].city,
\t \t \t \t \t \t \t \t \t \t \t \t country: response[index].country,
\t \t \t \t \t \t \t \t \t \t \t \t state: response[index].state,
\t \t \t \t \t \t \t \t \t \t \t \t zip: response[index].zip,
\t \t \t \t \t \t \t \t \t \t \t \t description: response[index].description,
\t \t \t \t \t \t \t \t \t \t \t \t phone: response[index].phone,
\t \t \t \t \t \t \t \t \t \t \t \t fax: response[index].fax,
\t \t \t \t \t \t \t \t \t \t \t \t url: response[index].url,
\t \t \t \t \t \t \t \t \t \t \t \t email: response[index].email,
\t \t \t \t \t \t \t \t \t \t \t \t hours: response[index].hours,
\t \t \t \t \t \t \t \t \t \t \t \t thumb: response[index].thumb
\t \t \t \t \t \t \t \t \t \t \t };
\t \t \t \t \t \t \t latLng = new google.maps.LatLng(response[index].lat, response[index].lng); \t
\t \t \t \t \t \t \t addMarker(latLng, response[index].id, infoWindowData, draggable); \t \t \t \t \t \t
\t \t \t \t \t \t });
\t \t \t \t \t \t fitBounds();
\t \t \t \t \t }
\t \t \t \t \t else{
\t \t \t \t \t \t alert("No stores are near 50 Km from the address you have entered.");
\t \t \t \t \t } \t
\t \t \t \t }
\t \t \t \t else{
\t \t \t \t \t alert("There is some problem. Please try after some time.");
\t \t \t \t }
\t \t \t }); \t \t \t \t
\t \t }
\t \t else{
\t \t \t alert("sorry! There is Error !!!");
\t \t }
\t }); \t
});
google.maps.event.addDomListener(window, "load", initializeMenuMap);
EDITED
當我檢查tilesloaded,當時它顯示我tilesloaded。
如果加載了瓷磚,那麼它爲什麼會顯示Safari中的灰色區域?
EDITED
好了,所以當我檢查到網絡中,我發現所有的瓦片被下載和perfect.So什麼可能是灰色地帶的問題?
我嘗試過,但還是同樣的問題。它真的很討厭我:/ – Twix
如果Map不在菜單內,它的工作就很完美。 – Twix