2

場所をクリックしたときに Google マップ v3 に表示される気球のスタイルを設定する方法を知っている人はいますか? デフォルトの「コミックスタイル」を変更したい。

2 番目の質問: 国を自動的に (または他の方法で) 色付けすることはできますか (つまり、米国に赤いオーバーレイ、カナダに黄色のオーバーレイなどを使用したい)?

ありがとう、ダ

4

2 に答える 2

3

マーカーをクリックするときにカスタム要素を切り替えることで、スタイリングの問題を解決しました。小さな情報ウィンドウを作成する必要があったので、コミックスタイルのポインターなしでクリックされたマーカーによって表示されるカスタム要素を作成しました。

google.maps.event.addListener(marker, 'click', function() {
  loadInfoWindow(map, marker);
});

function loadInfoWindow(map, marker){
        clearInfoWindow();
        pixelOffset = getPixelPosInMap(map, marker);
        var iwc = ''; // infowindow markup goes here
        $('#iwContainer').css({'margin-top':(pixelOffset.y - 100), 'margin-left':(pixelOffset.x - 40)}).html(iwc).fadeIn('fast');
    }

function getPixelPosInMap(map, marker){
        var scale = Math.pow(2, map.getZoom());
        var nw = new google.maps.LatLng(
            map.getBounds().getNorthEast().lat(),
            map.getBounds().getSouthWest().lng()
        );
        var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
        var worldCoordinate = map.getProjection().fromLatLngToPoint(marker.getPosition());
        return new google.maps.Point(
            Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
            Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
        );
    }

このコードは、jQueryを使用して情報ウィンドウコンテナ#iwContainerをフェッチします。情報ウィンドウコンテナには次のスタイルがあります。

#iwContainer {
  position: absolute;
  display: none;
  background-color: white;
  color: #900;
  font-size: 10px;
  padding: 5px;
  width: 90px;
  border: 1px solid #900;
  border-radius: 5px;
  z-index: 100;
  opacity: 0.85;
}
于 2011-12-12T09:17:21.390 に答える
3

ご覧のとおり、infowindow バルーンにはインライン スタイルがあるため、それらにスタイルを適用するのは問題です。そのため、別の方法の 1 つは、バブル用の独自のクラスを作成することです (または、バブル用のクラスを見つけます。たとえば、Google マップ: カスタム InfoWindow を作成する方法を参照してください)。

2 番目の質問: 必要に応じてオーバーレイを表示する簡単で一般化された方法はありません。つまり、そのような API 呼び出しはありません。ただし、ポリゴンを使用すると比較的簡単に実行できます。( How do i Add and Remove polygons on a Google Map (version 3)?を参照してください)、ネット上で見つけることができる国境が必要なだけです。

于 2011-12-12T09:02:19.700 に答える