Question

我已成功将kml文件导入Google地图，以便显示房地产边界。

我还使用了https://google-developers.appspot.com/maps/documentation/javascript/examples/polygon-arrays处的教程来绘制简单的多边形并让它们可以点击。

但是，我不知道如何使kml文件创建的多边形可点击。 kml上的多边形是非常复杂的形状，由许多坐标组成，形成多边形。以下示例仅适用于1个房地产边界：

-83.6530304633209,34.8237504877659,0 -83.65536046332301,34.8248804877671,0 -83.65672046332431,34.8262904877683,0 -83.6567504633242,34.8271904877693,0 -83.655330463323,34.8308304877725,0 -83.6565104633242,34.8333304877749,0 -83.65765046332511,34.8349204877764,0 -83.6571104633247,34.8383604877794,0 -83.6591604633265,34.8443604877853,0 -83.6588104633263,34.8468904877875,0 -83.6591604633265,34.8507504877912,0 -83.6583904633258,34.8543804877945,0 -83.6569404633244,34.8566604877968,0 -83.65475046332242,34.8599504877998,0 -83.6545604633223,34.8610404878007,0 -83.6543204633219,34.8635704878032,0 -83.65568046332331,34.8684104878075,0 -83.6553904633231,34.8695004878086,0 -83.6546604633224,34.8706904878097,0 -83.654380463322,34.872050487811,0 -83.6552304633228,34.8745504878134,0 -83.65494046332262,34.8759104878145,0 -83.65377046332161,34.8768304878154,0 -83.6504704633185,34.8796104878179,0 -83.64877046331689,34.8814504878196,0 -83.6469204633151,34.8849204878229,0 -83.6450204633134,34.8870304878249,0 -83.64227046331081,34.8897904878275,0 -83.6389204633076,34.8911304878288,0 -83.6344604633034,34.8921304878297,0 -83.6330604633022,34.8926104878301,0 -83.6295204632988,34.8948504878322,0 -83.6278404632974,34.8969604878341,0 -83.6273304632969,34.89832048783551,0 -83.62726046329681,34.8994904878366,0 -83.6286904632982,34.9030704878399,0 -83.6287304632981,34.9045104878412,0 -83.62844046329791,34.9056004878421,0 -83.6268704632964,34.9077104878443,0 -83.6256904632953,34.9086304878451,0 -83.6240704632939,34.9091204878455,0 -83.6226304632926,34.9088804878452,0 -83.6204304632904,34.9083904878448,0 -83.6179704632882,34.9100604878463,0 -83.61680046328711,34.9109904878471,0 -83.6157204632862,34.9116404878477,0 -83.61126046328189,34.9123704878484,0 -83.610200463281,34.91347048784951,0

当我手动将它们转换为latlng对并将它们插入上面的Google教程时，这些坐标不起作用：

new google.maps.LatLng(-83.6530304633209,34.8237504877659),
new google.maps.LatLng(83.65536046332301,34.8248804877671),
new google.maps.LatLng(-83.65672046332431,34.8262904877683),
new google.maps.LatLng(-83.6567504633242,34.8271904877693)

任何人都有任何关于如何使kml图层多边形可点击或使用kml数据重绘多边形并使其可点击的想法？

由于

编辑：这是我用来加载kml的代码：

<!-- Declare the application as HTML5 using the <!DOCTYPE html> declaration -->
<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <!-- include the Maps API JavaScript using a script tag -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAaWOu7N4OX8BlYUwZhvWP2V0P6YQryN9Y&sensor=true"></script>
    <script type="text/javascript">
    function initialize()
    {
        <!-- create a JavaScript object literal to hold a number of map properties -->
        var myOptions =
        {
            center: new google.maps.LatLng(-34.397, 150.644),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            fillColor: '#0000ff'
        };
        <!-- a JavaScript function to create a "map" object -->
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        var myLayer = new google.maps.KmlLayer('http://www.domain.com/gmaps/1.kml',{suppressInfoWindows: true,map: map});
        google.maps.event.addListener
        (
            myLayer,"mouseover",function()
            {
                this.setOptions({fillColor: "#000000"});
            }
        ); 
        google.maps.event.addListener
        (
            myLayer, 'click', function(kmlEvent)
            {
                var text = kmlEvent.featureData.description;
                showInContentWindow(text);
            }
        );

        google.maps.event.addListener
        (
            myLayer,"mouseover",function()
            {
                this.setOptions
                (
                    {
                        fillColor: "#000000"
                    }
                );
            }
        ); 

        function showInContentWindow(text)
        {
            var sidediv = document.getElementById('content_window');
            sidediv.innerHTML = text;
        }
    }
    </script>
</head>
<!-- initialize the map object from the body tag's onload event -->
<body onLoad="initialize()">
    <!-- create a div element named "map_canvas" to hold the Map -->
    <div id="map_canvas" style="width:79%; height:100%; float:left"></div>
    <div id="content_window" style="width:19%; height:100%; float:left"></div>
</body>
</html>

Answer 1

很遗憾，您没有收到mouseover ^api-doc的KmlLayer个活动;检查api-doc，向下滚动一下以查看事件，您获得的所有事件包括：click，defaultviewport_changed和status_changed。我还探讨了可用的选项，因为KmlLayer是MVCObject ^api-doc，但不提供其他事件。我不认为这是可能的。

可能有另一种方法可以达到你想要的效果，但我还没有找到它;让我们看看其他人可以添加的内容。

Answer 2

使用KmlLayer，您无法更改多边形的属性。如果您使用第三方KML解析器（如geoxml3或geoxml-v3）将多边形渲染为原生Google Maps API v3对象，则可以更改其属性（但性能是否可接受取决于KML的复杂程度）是）。您还可以动态更改使用FusionTablesLayer渲染的切片中的多边形（将KML导入Fusion Tabel）。

Example changing the color of Polygons from KML rendered using geoxml3 on mouseover

Google会映射KML多边形

2 个答案: