クリック可能なマーカーとそうでないマーカー シャドウを使用するために、2 つの geoxml3 パーサーを設定しています。1 つはマーカー用、もう 1 つはシャドウ用です。それは機能しますが、2 つのレイヤーを使用することで、1 つのマーカーの影が別のマーカーに落ちないようにすることも期待しています。微妙なことですが、視覚的に垂直なマーカーに視覚的に水平な影を重ねると、3D 効果が損なわれます。マーカーのクラスターでは、マーカー ステムの間で物事がかなり暗くなります。
これで、アイコンが北から南にレンダリングされることがわかりました。そのため、アイコンは重なっているアイコンの上から南に見えます。私が期待していたのは、各パーサーが独自のレイヤーを作成するということでした。つまり、マーカー レイヤーは先行するシャドウ レイヤーの前に完全に表示され、どのマーカーにも影は落ちません。ただし、パーサーが両方の「レイヤー」を同時に北から南へと作業しているように見えます。ポイントごとに影の画像をレンダリングし、対応するマーカー画像をレンダリングしてから、次のポイントに移動するようです。次のマーカーが前のマーカーの南西にかなり近い場合、その影のイメージはその前のマーカーの上に落ちます。
ある種の錯覚が見えていないことを確認するために、演習として、いくつかの大きな重なり合う影付きマーカーを使用してマップを作成しました。私が望むのは、画像を下から上に重ねることです。
- 東グリーンランドの影
- グリーンランド シャドウ
- 東グリーンランド マーカー
- グリーンランドマーカー
代わりに、階層化されているように見えます。
- 東グリーンランドの影
- 東グリーンランド マーカー
- グリーンランド シャドウ
- グリーンランドマーカー
グリーンランド シャドウが東グリーンランド マーカーに落ちています。
では、すべてのマーカーをまとめて、すべての影の前に表示することはできますか? 現時点では追跡できませんが、クリックできない「シャドウ レイヤー」のようなものを含む標準の Google マップ レイヤーのリストをどこかで見たと思います。標準のアイコンを使用して google.maps.KmlLayer を作成すると、API は対応する影の画像を自動的に取得し、それらを、私が要求した KmlLayer の背後に完全に位置する影レイヤーであると私が推測するものに配置します。
現在のプロジェクトでは、目印にプログラムでアクセスできるように、geoxml3 マーカー レイヤーが必要です。実際には 32x32 のアイコンで作業できるので、この場合は影に KmlLayer を使用するようにフォールバックできますが、将来の参考のために、クリック可能なオブジェクトの背後に完全に配置される、クリックできない geoxml3 レイヤーのオプションがあると便利です。層。それを行う方法はありますか？それは、その Google マップのシャドウ レイヤーに何らかの方法でレンダリングすることでしょうか?
スクリプトは次のとおりです。
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(71, -45),
zoom: 4,
preserveViewport: true
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Shadow Layer
var shadow = new geoXML3.parser({
map: map,
zoom: false,
markerOptions: {clickable: false}
});
shadow.parse('greenland_shadow_5.kml');
// Marker Layer
var blues = new geoXML3.parser({
map: map,
singleInfoWindow: true,
zoom: false,
suppressDirections: true,
markerOptions: {
shape: {
type: 'circle',
coords: [38,38,38]
}
}
});
blues.parse('greenland_5.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
2 つの KML ファイルは、IconStyles を除いて同一です。
<IconStyle>
<Icon>
<href>bluemarker_76x128.png</href>
<scale>1.0</scale>
</Icon>
<hotSpot x="38" y="0" xunits="pixels" yunits="pixels" />
</IconStyle>
対：
<IconStyle>
<Icon>
<href>markershadow_188x128.png</href>
<scale>1.0</scale>
</Icon>
<hotSpot x="96" y="0" xunits="pixels" yunits="pixels" />
</IconStyle>