0

特定のレコードの位置データがない場合にエラー メッセージを表示する画面オーバーレイを生成する KML を生成します。動作すると、次のようになります。

実施例

firefox と chrome の 1 つの (一貫したシナリオ) では、代わりにこれを行います。

動かない例

これが Firefox と Chrome の両方で機能する別のページとの違いは、マップ コンテナー div が、機能していないページの左側に配置され ( を使用position: absolute;)、次float: right;のように設定されていることです。 .

この画像を配置する KML の関連セクションは次のとおりです。

<ScreenOverlay>
  <Icon>
    <href>http://SomeURL.com/image.png</href>
  </Icon>
  <overlayXY x="0.5" xunits="fraction" y="0.5" yunits="fraction" />
  <screenXY x="0.5" xunits="fraction" y="0.5" yunits="fraction" />
  <size x="0" xunits="pixels" y="0" yunits="pixels" />
</ScreenOverlay>

Google マップの設定/初期化:

function initialize() {
    var latlng = new google.maps.LatLng(64, -117);
    var settings = {
        zoom: 4,
        maxZoom: 10,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        navigationControl: true,
        navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("MapCanvas"), settings);
    var geoLayer = new google.maps.KmlLayer('@Model.KMLURL');
    geoLayer.setMap(map);
}

これが機能するページの div:

div#MapCanvas {
 float: right;
 border: 2px solid #666666;
 width: 400px;
 height: 300px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

div#MapContainer {
 float: right;
 width: 400px;
 height: 300px;
 margin-bottom: 10px;
}

動作しないページ上の div:

div#MapCanvas {
 border: 2px solid #666666;
 width: 400px;
 height: 300px;
 -moz-border-radius: 5px;
 border-radius: 5px;
}

div#MapContainer {
 position: absolute;
 top: 0;
 left: 0;
 width: 400px;
 height: 300px;
 padding: 5px;
}

私の推測では、これは、ページの読み込み時に div がどのように移動するかに関係しており、画像の配置と何らかの形で相互作用しているということです。私は次のことを試しました：

  1. CSS の代替配置コードなので、マップを別の場所に移動しても効果はありません。このページでは画像がまだオフセットされているため、軌道から外れている可能性があります。
  2. ページがロードされたら、JavaScript 呼び出しを使用して KML レイヤーを手動でアンロードおよび再ロードします。
4

1 に答える 1

0

最後に、問題のある CSS 設定が見つかりました: マップ コンテナーをラップする div には、次の設定がありました:

text-align: center;

画面全体に対して画面オーバーレイを中央に配置するようです。CSS がスクリーン オーバーレイと対話する理由について誰かが説明を持っている場合は、知りたいです。これが他の誰かに役立つことを願っています。

text-align: initial;MapCanvas div の CSSのセットでこれを修正しました。

于 2013-05-16T16:03:20.257 に答える