0

我想自定义处理 mapTypes 更改的按钮的显示（TOP_RIGHT默认情况下为画布）。

除了对象，我还没有找到任何mapTypes自定义功能MapTypeControlStyle，但是非常有限。我想控制按钮的视觉风格。

此外，div按按钮生成的元素不限制 ID 或其他东西来正确获取它们：

<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>

有任何想法吗？

4

2 回答 2

1

在网上搜索了几次后，我没有发现任何关于深度自定义默认地图类型 google 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);
  });
}

wheremapTypeName是地图类型 ID（例如 google.maps.MapTypeId.ROADMAP），并且controlPos是地图画布上按钮的位置（例如默认按钮的 google.maps.ControlPosition.TOP_RIGHT）。

initialize最后，只需在函数中调用按钮的创建：

var roadmapButton = new DrawMapTypeControl(map, 
                                           google.maps.MapTypeId.ROADMAP, 
                                           google.maps.ControlPosition.TOP_RIGHT);

在这里，新的自定义按钮，你只需要为map_type_button,map_type_button_border和map_type_button_interior类添加一些 css。

希望这会有所帮助。

于 2013-06-14T08:51:07.890 回答
0

您可以添加自己的自定义按钮并将您的功能分配给它们......

看看这个

于 2013-06-17T05:16:12.880 回答