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

【问题标题】：How to Change color of KML polygon on mouse click如何在鼠标单击时更改 KML 多边形的颜色
【发布时间】：2016-05-09 09:03:30
【问题描述】：

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

问题：我加载了 KML 文件但无法获取其多边形，因此我可以实现点击监听器。

【问题讨论】：

你的代码是什么样的？
希望在 Google 地球中仅使用 KML 或在 Google 地图上下文中执行此操作？

标签： javascript google-maps google-maps-api-3 kml

【解决方案1】：

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

由于原产地政策，无法发布小提琴。希望这会有所帮助。

【讨论】：

以上代码显示：-ReferenceError: geoXML3 is not defined 但我已经添加了这个 js。
确保 geoxml3 脚本包含在头部和我告诉的代码之前。
将此链接用于geoxml rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js
我也是用的和你提供的一样的js。
@Ritesh Paliwal 因为你没有发布你的代码真的很难说什么，无论如何尝试更新部分中的代码我已经测试过它的工作