1

我已成功将 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>
4

2 回答 2

1

Unfortunately, you don't get a mouseover event with the KmlLayerapi-doc; check at the api-doc, scroll down a bit to see the Events, and all you get for events are: click, defaultviewport_changed, and status_changed. I have also explored the options that are available because the KmlLayer is an MVCObjectapi-doc, but that doesn't offer additional events. I don't think this is possible.

There may be another way to achieve what you want, but I haven't found it; let's see what others may be able to add.

于 2012-06-12T19:51:42.353 回答
1

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

在鼠标悬停时使用 geoxml3 渲染的 KML 更改多边形颜色的示例

于 2013-10-17T12:30:35.650 回答