0

Google マップを使用してソーラー展開を支援する Web アプリケーションを作成しています。要するに、Google マップをフルスクリーンで読み込んで、次のコードを使用して KML レイヤーをオーバーレイしています。

window.solarLayer = new google.maps.KmlLayer({
url: 'somelink'
}); 
window.solarLayer.setMap(window.map);

このアプリケーションのもう 1 つの機能は、ユーザーがマップ内の任意の場所をクリックできることです。クリックしたポイントの緯度と経度を使用して、ユーザーに太陽データを返します。

これはすべて、クリック イベント ハンドラーを使用することで正常に機能します。

google.maps.event.addListener(map, 'click', function(event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    console.log( latitude + ', ' + longitude );
});

ただし、KML レイヤーを含むマップの部分は、レイヤーのクリックを登録するだけで、作成したクリック イベントにアクセスしません...

KML レイヤーのクリック イベントを無効にする方法を知っている人はいますか? または、イベント リスナーを KML レイヤーのイベント リスナーに置き換える方法を教えてください。

KMLレイヤーとマップでクリックイベントを使用して緯度と経度を取得しようとしましたが、ユーザーが実際にクリックした場所ではなく、そのレイヤーが配置されている場所の静的な経度しか得られません。

事前に助けてくれてありがとう！

4

1 に答える 1

5

KmlLayerのクリック可能オプションを false に設定します。

KmlLayerOptions ドキュメントから:

クリック可能| タイプ: ブール値

true の場合、レイヤーはマウス イベントを受け取ります。デフォルト値は true です。

コードスニペット：

var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  window.solarLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    clickable: false
  });
  window.solarLayer.setMap(window.map);


  google.maps.event.addListener(map, 'click', function(event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    document.getElementById('coords').innerHTML = event.latLng.toUrlValue(6);
    console.log(latitude + ', ' + longitude);
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="coords"></div>
<div id="map_canvas"></div>

于 2014-02-24T17:11:31.330 に答える