如何在鼠标单击时更改KML多边形的颜色

How to Change color of KML polygon on mouse click

本文关键字：KML 多边形 颜色 鼠标 单击      更新时间：2023-09-26

我有一个KML文件，其中绘制了很多多边形，我想在鼠标单击时更改多边形的颜色，使其看起来是选定的多边形。

问题：我加载了KML文件，但无法获取其多边形，因此我可以实现click listener。

您可以使用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>

更新：尝试下面我测试的代码，并在必要时对其进行工作编辑

对于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>

现在这是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>

由于原产地政策，无法发布fiddle。希望这能有所帮助。

相关文章：