谷歌地图样式缩放控件

我使用的是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

谷歌地图样式缩放控件

回答

相关问题