Javascript 如何在Google Maps v3 API中更改Kmlayer的颜色？

我正在编写一个应用程序来渲染地图上的轨迹。我想动态修改这些步道的颜色，这取决于它们的泥泞程度

我正在使用谷歌地图v3api

如果可能的话，我想用Javascript做所有的事情。KML可能与包含Javascript的页面不在同一个域上，因此我可能无法对其进行XmlHttpRequest

它看起来像是在KML文件本身中指定的颜色，因此我可以编写服务器端代码来获取原始KML并重新提供它的修改版本

---

我的问题是：我是否可以在不进行服务器端处理的情况下执行此操作，而只需在Kmlayer上设置一个属性来设置颜色？

我认为目前Kmlayer对象上没有任何属性可以更改颜色。可以动态更改多边形填充颜色 例如使用

new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  }); 

---

但是

fillColor

不是KmlLayer构造函数中的选项

到目前为止，我认为KmlLayer对象上没有任何属性可以更改颜色。可以动态更改多边形填充颜色 例如使用

new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  }); 

---

但是

fillColor

不是KmlLayer构造函数中的选项

值得一提的是，我编写了一个appengine应用程序，它获取指向KML或GPX文件的url，并将其转换为包含给定文件中lat/lng坐标的JSON数组

源代码如下：

演示页面如下：

---

获取积分的示例URL是：

为了说明它的价值，我编写了一个应用程序引擎应用程序，它获取指向KML或GPX文件的URL，并将其转换为包含给定文件中lat/lng坐标的JSON数组

源代码如下：

演示页面如下：

获取积分的示例URL为：

参考：

请试试这个

<style type="text/css">
    html, body, #map_canvas {
        width:   750px;
        height:  600px;
        margin:  0;
        padding: 0;
    }
        .infowindow * {font-size: 90%; margin: 0}
    </style>

            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/ZipFile.complete.js"></script>
            <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/kmz/geoxml3.js"></script>
            <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"></script> 

    <script type="text/javascript">
                var geoXml = null;
                var geoXmlDoc = null;
                var map = null;
                var myLatLng = null;
                var myGeoXml3Zoom = true;
                var sidebarHtml = "";
                var infowindow = null;
                var kmlLayer = null;
                var filename = "test.kmz";      //kml or kmz file                   
                function MapTypeId2UrlValue(maptype) {
                    var urlValue = 'm';
                    switch (maptype) {
                        case google.maps.MapTypeId.HYBRID: urlValue = 'h';
                            break;
                        case google.maps.MapTypeId.SATELLITE: urlValue = 'k';
                            break;
                        case google.maps.MapTypeId.TERRAIN: urlValue = 't';
                            break;
                        default:
                        case google.maps.MapTypeId.ROADMAP: urlValue = 'm';
                            break;
                    }
                    return urlValue;
                }


                function initialize() {
                    myLatLng = new google.maps.LatLng(39.8000959563484, -89.549560546875);
                    // these set the initial center, zoom and maptype for the map 
                    // if it is not specified in the query string
                    var lat = 37.422104808;
                    var lng = -122.0838851;
                    var zoom = 18;
                    var maptype = google.maps.MapTypeId.ROADMAP;

                    // If there are any parameters at eh end of the URL, they will be in  location.search
                    // looking something like  "?marker=3"

                    // skip the first character, we are not interested in the "?"
                    var query = location.search.substring(1);

                    // split the rest at each "&" character to give a list of  "argname=value"  pairs
                    var pairs = query.split("&");
                    for (var i = 0; i < pairs.length; i++) {
                        // break each pair at the first "=" to obtain the argname and value
                        var pos = pairs[i].indexOf("=");
                        var argname = pairs[i].substring(0, pos).toLowerCase();
                        var value = pairs[i].substring(pos + 1).toLowerCase();

                        // process each possible argname  -  use unescape() if theres any chance of spaces
                        if (argname == "id") { id = unescape(value); }
                        if (argname == "filename") { filename = unescape(value); }
                        if (argname == "marker") { index = parseFloat(value); }
                        if (argname == "lat") { lat = parseFloat(value); }
                        if (argname == "lng") { lng = parseFloat(value); }
                        if (argname == "zoom") {
                            zoom = parseInt(value);
                            myGeoXml3Zoom = false;
                        }
                        if (argname == "type") {
                            // from the v3 documentation 8/24/2010
                            // HYBRID This map type displays a transparent layer of major streets on satellite images. 
                            // ROADMAP This map type displays a normal street map. 
                            // SATELLITE This map type displays satellite images. 
                            // TERRAIN This map type displays maps with physical features such as terrain and vegetation. 
                            if (value == "m") { maptype = google.maps.MapTypeId.ROADMAP; }
                            if (value == "k") { maptype = google.maps.MapTypeId.SATELLITE; }
                            if (value == "h") { maptype = google.maps.MapTypeId.HYBRID; }
                            if (value == "t") { maptype = google.maps.MapTypeId.TERRAIN; }

                        }
                    }
                    if (!isNaN(lat) && !isNaN(lng)) {
                        myLatLng = new google.maps.LatLng(lat, lng);
                    }
                    var myOptions = {
                        zoom: zoom,
                        center: myLatLng,
                        // zoom: 5,
                        // center: myLatlng,
                        mapTypeId: maptype
                    };
                    map = new google.maps.Map(document.getElementById("map_canvas"),
                          myOptions);
                    infowindow = new google.maps.InfoWindow({});

                    geoXml = new geoXML3.parser({
                        map: map,
                        infoWindow: infowindow,
                        singleInfoWindow: true,
                        zoom: myGeoXml3Zoom,
                        markerOptions: { optimized: false },
                        afterParse: useTheData
                    });
                    geoXml.parse(filename);

                };

                //            function kmlPgClick(pm) {
                //                if (geoXml.docs[0].placemarks[pm].polygon.getMap()) {
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon, "click");
                //                } else {
                //                    geoXmlDoc.placemarks[pm].polygon.setMap(map);
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon, "click");
                //                }
                //            }
                //            function kmlPlClick(pm) {
                //                if (geoXml.docs[0].placemarks[pm].polyline.getMap()) {
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline, "click");
                //                } else {
                //                    geoXmlDoc.placemarks[pm].polyline.setMap(map);
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline, "click");
                //                }
                //            }
                //            function kmlClick(pm) {
                //                if (geoXml.docs[0].placemarks[pm].marker.getMap()) {
                //                    google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker, "click");
                //                } else {
                //                    geoXmlDoc.placemarks[pm].marker.setMap(map);
                //                    google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker, "click");
                //                }
                //            }

                function kmlColor(kmlIn) {
                    var kmlColor = {};
                    if (kmlIn) {
                        aa = kmlIn.substr(0, 2);
                        bb = kmlIn.substr(2, 2);
                        gg = kmlIn.substr(4, 2);
                        rr = kmlIn.substr(6, 2);
                        kmlColor.color = "#" + rr + gg + bb;
                        kmlColor.opacity = parseInt(aa, 16) / 256;
                    } else {
                        // defaults
                        kmlColor.color = "red";
                        kmlColor.opacity = 0.45;
                    }
                    return kmlColor;
                }
                var highlightOptions = { fillColor: "red", strokeColor: "#000000", fillOpacity: 0.9, strokeWidth: 10 };
                var highlightLineOptions = { strokeColor: "red", strokeWidth: 10 };
                function kmlHighlightPoly(pm) {
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        var placemark = geoXmlDoc.placemarks[i];
                        if (i == pm) {
                            if (placemark.polygon) placemark.polygon.setOptions(highlightOptions);
                            if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions);
                        } else {
                            if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
                            if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
                        }
                    }
                }
                function kmlUnHighlightPoly(pm) {
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        if (i == pm) {
                            var placemark = geoXmlDoc.placemarks[i];
                            if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle);
                            if (placemark.polyline) placemark.polyline.setOptions(placemark.polyline.normalStyle);
                        }
                    }
                }
                function showAll() {
                    map.fitBounds(geoXmlDoc.bounds);
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        var placemark = geoXmlDoc.placemarks[i];
                        if (placemark.polygon) placemark.polygon.setMap(map);
                        if (placemark.polyline) placemark.polyline.setMap(map);
                        if (placemark.marker) placemark.marker.setMap(map);
                    }
                }

                function highlightPoly(poly, polynum) {
                    //    poly.setOptions({fillColor: "#0000FF", strokeColor: "#0000FF", fillOpacity: 0.3}) ;
                    google.maps.event.addListener(poly, "mouseover", function () {
                        var rowElem = document.getElementById('row' + polynum);
                        if (rowElem) rowElem.style.backgroundColor = "red";
                        if (poly instanceof google.maps.Polygon) {
                            poly.setOptions(highlightOptions);
                        } else if (poly instanceof google.maps.Polyline) {
                            poly.setOptions(highlightLineOptions);
                        }
                    });
                    google.maps.event.addListener(poly, "mouseout", function () {
                        var rowElem = document.getElementById('row' + polynum);
                        if (rowElem) rowElem.style.backgroundColor = "red";
                        poly.setOptions(poly.normalStyle);
                    });               
                }
                function makeSidebarPolylineEntry(i) {
                    var name = geoXmlDoc.placemarks[i].name;
                    if (!name || (name.length == 0)) name = "polyline #" + i;
                    // alert(name);
                    sidebarHtml += '<tr id="row' + i + '"><td onmouseover="kmlHighlightPoly(' + i + ');" onmouseout="kmlUnHighlightPoly(' + i + ');"><a href="javascript:kmlPlClick(' + i + ');">' + name + '</a> - <a href="javascript:kmlShowPlacemark(' + i + ');">show</a></td></tr>';

                }
                function makeSidebarEntry(i) {
                    var name = geoXmlDoc.placemarks[i].name;
                    if (!name || (name.length == 0)) name = "marker #" + i;
                    // alert(name);
                    sidebarHtml += '<tr id="row' + i + '"><td><a href="javascript:kmlClick(' + i + ');">' + name + '</a></td></tr>';
                }  
                function useTheData(doc) {
                    var currentBounds = map.getBounds();
                    if (!currentBounds) currentBounds = new google.maps.LatLngBounds();
                    // Geodata handling goes here, using JSON properties of the doc object
                    sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>';
                    //  var sidebarHtml = '<table>';
                    geoXmlDoc = doc[0];
                    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) {
                        // console.log(doc[0].markers[i].title);
                        var placemark = geoXmlDoc.placemarks[i];
                        if (placemark.polygon) {
                            if (currentBounds.intersects(placemark.polygon.bounds)) {
                                //makeSidebarPolygonEntry(i);
                            }
                            var kmlStrokeColor = kmlColor(placemark.style.color);
                            var kmlFillColor = kmlColor(placemark.style.fillcolor);
                            var normalStyle = {
                                strokeColor: kmlStrokeColor.color,
                                strokeWeight: placemark.style.width,
                                strokeOpacity: kmlStrokeColor.opacity,
                                fillColor: kmlFillColor.color,
                                fillOpacity: kmlFillColor.opacity
                            };
                            placemark.polygon.normalStyle = normalStyle;

                            highlightPoly(placemark.polygon, i);
                        }
                        if (placemark.polyline) {
                            if (currentBounds.intersects(placemark.polyline.bounds)) {
                                makeSidebarPolylineEntry(i);
                            }
                            var kmlStrokeColor = kmlColor(placemark.style.color);
                            var normalStyle = {
                                strokeColor: kmlStrokeColor.color,
                                strokeWeight: placemark.style.width,
                                strokeOpacity: kmlStrokeColor.opacity
                            };
                            placemark.polyline.normalStyle = normalStyle;

                            highlightPoly(placemark.polyline, i);
                        }
                        if (placemark.marker) {
                            if (currentBounds.contains(placemark.marker.getPosition())) {
                                makeSidebarEntry(i);
                            }
                        }

                        /*    doc[0].markers[i].setVisible(false); */
                    }
                    sidebarHtml += "</table>";
                    document.getElementById("sidebar").innerHTML = sidebarHtml;         //show to all link
                };           

            </script>

html，正文，#地图#画布{
宽度：750px；
高度：600px；
保证金：0；
填充：0；
}
.infowindow*{字体大小：90%；边距：0}
var geoXml=null；
var geoXmlDoc=null；
var-map=null；
var mylatng=null；
var mygeoml3zoom=true；
var sidebarHtml=“”；
var infowindow=null；
var kmlLayer=null；
var filename=“test.kmz”//kml或kmz文件
函数MapTypeId2UrlValue（maptype）{
var urlValue='m'；
开关（映射类型）{
case google.maps.MapTypeId.HYBRID:urlValue='h'；
打破
case google.maps.MapTypeId.SATELLITE:urlValue='k'；
打破
case google.maps.MapTypeId.TERRAIN:urlValue='t'；
打破
违约：
case google.maps.MapTypeId.ROADMAP:urlValue='m'；
打破
}
返回URL值；
}
函数初始化（）{
myLatLng=new google.maps.LatLng（39.8000959563484，-89.549560546875）；
//这些设置贴图的初始中心、缩放和贴图类型
//如果未在查询字符串中指定
var lat=37.422104808；
var lng=-122.0838851；
var zoom=18；
var maptype=google.maps.MapTypeId.ROADMAP；
//如果URL末尾有任何参数，它们将位于location.search中
//看起来像“？标记=3”
//跳过第一个字符，我们对“”不感兴趣
var query=location.search.substring（1）；
//在每个“&”字符处拆分其余字符，以给出“argname=value”对的列表
var pairs=query.split（“&”）；
对于（变量i=0；i