谷歌地图 KML 多边形答案

【问题标题】：Google maps KML polygons谷歌地图 KML 多边形
【发布时间】：2012-06-15 15:06:17
【问题描述】：

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

【问题讨论】：

你能告诉我们你得到的代码吗？甚至是一个样品但功能齐全的样品？具有描述元素或 BalloonStyle/文本的 KML 多边形应该可以自动点击。
天哪，这是一个快速的回复！。我错误地说我不能让多边形点击，我的意思是说我不能让他们对鼠标悬停做出反应（即改变颜色）。我已经在编辑中发布了上面的代码。谢谢。
您还应该编辑问题以说鼠标悬停而不是单击。 KML 还指定 lng,lat,alt 组，但 LatLng 采用 lat,lng。你的例子有错误的方式。
您正在寻找的选项是一种从 KML 中提取点并创建可以为您提供mouseover 功能的方法吗？
是的，如果无法在 kmlLayer 上完成。

标签： google-maps-api-3

【解决方案1】：

不幸的是，您没有收到带有KmlLayer^api-doc 的mouseover 事件；检查 api-doc，向下滚动一点以查看 Events，您获得的所有事件是：click、defaultviewport_changed 和 status_changed。我还探索了可用的选项，因为KmlLayer 是MVCObject^api-doc，但这不提供额外的事件。我认为这是不可能的。

可能还有另一种方法可以实现您想要的，但我还没有找到；让我们看看其他人可以添加什么。

【讨论】：

【解决方案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

【讨论】：