0

TOP_RIGHTmapTypes (既定ではキャンバス)の変更を処理するボタンの表示をカスタマイズしたいと考えています。

オブジェクト以外の 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

Web で数回検索した後、デフォルトのマップ タイプの 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);
  });
}

mapTypeNameはマップ タイプ 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 に答える