谷歌地圖樣式縮放控件

我使用的是Google Maps V3 JavaScript API，並且想要設置縮放控件的樣式。儘管Google文檔包含有關移動自定義控件的信息，但它似乎沒有任何用於定製自定義控件的樣式。 https://developers.google.com/maps/documentation/javascript/controls#ControlModification 谷歌地圖樣式縮放控件

我想要做的是能夠對現有的縮放控件進行樣式設置。

有沒有辦法做風格的現有控制？我寧願通過創建新的自定義控件來做到這一點。

來源

2013-02-20 sifxtreme

您可能需要使用JQuery，因爲控件沒有真正的唯一類或ID。我使用了類似這裏的技術：Styling standard Zoom control in Google Maps v3

這裏是我的版本：

google.maps.event.addListener(map, 'tilesloaded', function() { 
    $('#map_canvas').find('img[src="https://maps.gstatic.com/mapfiles/szc4.png"]').parent('.gmnoprint').css('YOUR_STYLE_HERE', 'YOUR_VALUE_HERE'); 
});

所以基本上，上述選擇變焦控制圖像，然後逐步提高一個層次，以獲得整個容器。您可能需要指定與我不同的圖像，這是針對「小」版本的。

來源

2013-07-18 17:17:30

有針對使用谷歌的地圖API和自定義控制設置一個選項，這裏是我發現的代碼片段：

var map; 
var chicago = new google.maps.LatLng(41.850033, -87.6500523); 

/** 
* The ZoomControl adds +/- button for the map 
* 
*/ 

function ZoomControl(controlDiv, map) { 

    // Creating divs & styles for custom zoom control 
    controlDiv.style.padding = '5px'; 

    // Set CSS for the control wrapper 
    var controlWrapper = document.createElement('div'); 
    controlWrapper.style.backgroundColor = 'white'; 
    controlWrapper.style.borderStyle = 'solid'; 
    controlWrapper.style.borderColor = 'gray'; 
    controlWrapper.style.borderWidth = '1px'; 
    controlWrapper.style.cursor = 'pointer'; 
    controlWrapper.style.textAlign = 'center'; 
    controlWrapper.style.width = '32px'; 
    controlWrapper.style.height = '64px'; 
    controlDiv.appendChild(controlWrapper); 

    // Set CSS for the zoomIn 
    var zoomInButton = document.createElement('div'); 
    zoomInButton.style.width = '32px'; 
    zoomInButton.style.height = '32px'; 
    /* Change this to be the .png image you want to use */ 
    zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")'; 
    controlWrapper.appendChild(zoomInButton); 

    // Set CSS for the zoomOut 
    var zoomOutButton = document.createElement('div'); 
    zoomOutButton.style.width = '32px'; 
    zoomOutButton.style.height = '32px'; 
    /* Change this to be the .png image you want to use */ 
    zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")'; 
    controlWrapper.appendChild(zoomOutButton); 

    // Setup the click event listener - zoomIn 
    google.maps.event.addDomListener(zoomInButton, 'click', function() { 
    map.setZoom(map.getZoom() + 1); 
    }); 

    // Setup the click event listener - zoomOut 
    google.maps.event.addDomListener(zoomOutButton, 'click', function() { 
    map.setZoom(map.getZoom() - 1); 
    }); 

} 

function initialize() { 
    var mapDiv = document.getElementById('map-canvas'); 

    var mapOptions = { 
    zoom: 12, 
    center: chicago, 
    /* Disabling default UI widgets */ 
    disableDefaultUI: true 
    } 

    map = new google.maps.Map(mapDiv, mapOptions); 

    // Create the DIV to hold the control and call the ZoomControl() constructor 
    // passing in this DIV. 
    var zoomControlDiv = document.createElement('div'); 
    var zoomControl = new ZoomControl(zoomControlDiv, map); 

    zoomControlDiv.index = 1; 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv); 
} 

initialize();

，你可以在這裏看到一個工作示例： http://jsfiddle.net/maunovaha/jptLfhc8/

來源

2015-10-29 11:22:19 Picard

谷歌地圖樣式縮放控件

回答

相關問題