マウスクリック時にKMLポリゴンの色を変更する方法

ポリゴンをたくさん描いたKMLファイルがあります。マウスクリックでポリゴンの色を変更して、ポリゴンが選択されていると見なします。マウスクリック時にKMLポリゴンの色を変更する方法

問題： KMLファイルをロードしましたが、クリックリスナーを実装できるようにポリゴンを取得できませんでした。

2016-05-09 Ritesh Paliwal

あなたのコードはどのように見えますか？ – duncan

Google Earthでこれを行うには、KMLだけを使用するか、Googleマップのコンテキスト内で行ってください。 – JasonM1

あなたがそこにコールバックを与え、イベントハンドラを割り当てることが afterParse属性を使用することができます

<body onload="initialize()"> 
<div id="map_canvas" ></div> 
</body> 

<script> 
function initialize(){ 
myLatLng = new google.maps.LatLng(-34.397, 150.644); 

var myOptions = { 
      zoom: 18, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      // zoom: 5, 
      // center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

geoXml = new geoXML3.parser({ 
       map: map, 
       singleInfoWindow: true, 
       afterParse: myfunction 
      }); 
geoXml.parse('bs-stadium.kml'); 
} 

function myfunction(doc) 
{ 
    google.maps.event.addListener(doc,"mouseover",function() { 
    for (var i=0;i<doc.gpolylines.length;i++) 
     doc.gpolylines[i].setOptions({strokeColor: "#FFFF00"}); 
    }); 

    google.maps.event.addListener(doc,"mouseout",function() { 
     for (var i=0;i<doc.gpolylines.length;i++) 
     doc.gpolylines[i].setOptions({strokeColor: "#00FFFF"}); 
    }); 
} 
</script>

はUPDATE：私はKMLのどこに必要な

をテストし、その作業編集の下 コードを試してみてくださいファイル名をdemo.kmlにする

<?xml version="1.0" encoding="utf-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2"> 
<Document> 
    <name>tennis-lines</name> 
    <open>1</open> 
    <Placemark> 
    <name>outside</name> 
    <LineString> 
    <coordinates> 
     -122.43193945401,37.801983684521 
     -122.431564131101,37.8020327731402 
     -122.431499536494,37.801715236748 
     -122.43187136387,37.8016634915437 
     -122.43193945401,37.801983684521 
    </coordinates> 
    </LineString> 
</Placemark> 
<Placemark> 
    <name>west</name> 
    <LineString> 
    <coordinates> 
     -122.431885303019,37.8019316061803 
     -122.431762847554,37.8019476932246 
     -122.431719843168,37.8017374462006 
     -122.431841863906,37.8017213314352 
     -122.431885303019,37.8019316061803 
    </coordinates> 
    </LineString> 
</Placemark> 
<Placemark> 
    <name>east</name> 
    <LineString> 
    <coordinates> 
     -122.431714248439,37.8019544341044 
     -122.431592404659,37.8019694509363 
     -122.431548777661,37.8017591041777 
     -122.431671453253,37.8017428443014 
     -122.431714248439,37.8019544341044 
    </coordinates> 
    </LineString> 
</Placemark>

は今、これが原因助け元ポリシー.Hopefullyにバイオリンを投稿することができませんでしたhtmlファイル

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <title></title> 

    <style type="text/css"> 
    html, body, #map_canvas { 
    width: 300px; 
    height: 300px; 
    margin: 0; 
    padding: 0; 
    } 
    </style> 

    <script type="text/javascript" src="http://maps.google.com/maps/api/js"></script> 
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
    <script type="text/javascript"> 
    var geoXml = null; 
    var map = null; 
    var myLatLng = null; 

    function initialize() { 
      myLatLng = new google.maps.LatLng(37.422104808,-122.0838851); 

      var myOptions = { 
       zoom: 18, 
       center: new google.maps.LatLng(37.422104808,-122.0838851), 
       // zoom: 5, 
       // center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.HYBRID 
      }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
        myOptions); 

    geoXml = new geoXML3.parser({ 
       map: map, 
       singleInfoWindow: true, 
       afterParse: useTheData 
      }); 
      geoXml.parse('demo.kml'); 
     }; 


function highlightPoly(poly) { 
    poly.setOptions({strokeColor: "#0000FF"}); 
    google.maps.event.addListener(poly,"mouseover",function() { 
    poly.setOptions({strokeColor: "#ee0000"}); 
    }); 
    google.maps.event.addListener(poly,"mouseout",function() { 
    poly.setOptions({strokeColor: "#00ee00"}); 
    }); 
} 

function useTheData(doc){ 
    geoXmlDoc = doc[0]; 
    for (var i = 0; i < doc[0].gpolylines.length; i++) { 
    highlightPoly(doc[0].gpolylines[i]); 
    } 

}; 

</script> 
</head> 


<body onload="initialize()"> 

    <div id="map_canvas"> 
    </div> 

    <div id="map_text"> 
    </div> 

</body> 
</html>

です。

出典

2016-05-09 10:44:26 Viney

上記のコード表示：-ReferenceError：geoXML3は定義されていませんが、私はすでにこのjsを追加しています。 –

head部分に、コードの前にgeoxml3スクリプトが含まれていることを確認してください私は言いました。 – Viney

既に含まれています。 –

マウスクリック時にKMLポリゴンの色を変更する方法

答えて

関連する問題