Javascript 如何在Google Maps JS API v3中自定义mapTypes按钮的显示
我想自定义用于处理贴图类型更改的按钮的显示(Javascript 如何在Google Maps JS API v3中自定义mapTypes按钮的显示,javascript,css,google-maps,button,google-maps-api-3,Javascript,Css,Google Maps,Button,Google Maps Api 3,我想自定义用于处理贴图类型更改的按钮的显示(canvas的右上方) 除了MapTypeControlStyle对象之外,我没有找到任何mapTypes自定义函数,但它非常有限。我想控制按钮的视觉样式 此外,按钮生成的div元素不包含contractids或其他可以正确获取它们的内容: <div draggable="false" style="direction: ltr; overflow: hidden; text-align: center; position: relative;
canvas的右上方
)
除了MapTypeControlStyle
对象之外,我没有找到任何mapTypes自定义函数,但它非常有限。我想控制按钮的视觉样式
此外,按钮生成的div
元素不包含contractids或其他可以正确获取它们的内容:
<div draggable="false" style="direction: ltr; overflow: hidden; text-align: center; position: relative; color: rgb(0, 0, 0); font-family: Arial, sans-serif; -webkit-user-select: none; font-size: 13px; background-color: rgb(255, 255, 255); padding: 1px 6px; border: 1px solid rgb(113, 123, 135); -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px; font-weight: bold; min-width: 63px; background-position: initial initial; background-repeat: initial initial;">The map type</div>
地图类型
有什么想法吗?在网上搜索了几次之后,我没有发现任何关于默认地图类型谷歌api按钮深度定制的信息 因此,这里有一种从头开始重新创建它们并通过css自定义它们的方法 首先,使用以下选项禁用默认按钮:
map.setOptions({disableDefaultUI: true});
然后,您可以创建一个对象来处理自定义按钮的管理:
function DrawMapTypeControl(map, mapTypeName, controlPos) {
// Set div & css for the mapType button
var controlDiv = document.createElement('div');
controlDiv.className = 'map_type_button';
controlDiv.index = 1;
map.controls[controlPos].push(controlDiv);
// Set div & css for the control border.
var controlUI = document.createElement('div');
controlDiv.className = 'map_type_button_border';
controlDiv.appendChild(controlUI);
// Set div & css for the control interior.
var controlText = document.createElement('div');
controlDiv.className = 'map_type_button_interior';
controlText.innerHTML = '<strong>' + mapTypeName + '</strong>';
controlUI.appendChild(controlText);
// Setup the click event listener: simply set the map type.
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setMapTypeId(mapTypeName);
});
}
这里是全新的自定义按钮,您只需为map\u-type\u-button
、map\u-type\u-button\u-border
和map\u-type\u-button\u-interior
类添加一些css即可
希望这会有所帮助。您可以添加自己的自定义按钮,并将功能分配给它们
看看我的答案,就是这样。
var roadmapButton = new DrawMapTypeControl(map,
google.maps.MapTypeId.ROADMAP,
google.maps.ControlPosition.TOP_RIGHT);