Dynamically change colour of KML polygon in Google Maps API v3

问题

I'm using Google Maps v3 API to load a KML layer and want to be able to change the colour of the KML from its default blue without having to edit the KML file itself. Is this possible using JavaScript or some other means?

Thanks, Neil

回答1:

From my understanding of the documentation, 'no', but it's not especially clear. I'm trying to do a similar thing (but update the colour of mouseover/mouseout).

The KML file is loaded by the Google servers, parsed and sent along to your javascript object to be applied to the map, so, by the time your javascript KMLLayer sees it, it's all sorted out.

You may be able to do something with Styles and styleUrl. This is supposed to allow you to set a number of different styles that can then be applied at runtime, however, I haven't got it working.

回答2:

I have done this by creating a web service which reads in a KML file to a string, inserts a style section to the beginning of the KML string, and also a styleURL to each uniquely named placemark. It's fairly simple to amend the markup using a .net web service and write it back out to the server you have hosting the web service.

For example this uses a class which contains placemark IDs and a colour flag:

    public string KMLStyler(string URL, string URLName, Data[] MyData)
    {
        try
        {
            ReadFile(URL);

            string NewKML = ReadFile(URL);

            string RedStyle = "<Style id=\"red\"><LineStyle><color>7F7F7F7F</color><width>2</width></LineStyle><PolyStyle><color>7F0000FF</color><fill>1</fill><outline>1</outline></PolyStyle></Style>";
            string BlackStyle = "<Style id=\"black\"><LineStyle><color>7F7F7F7F</color><width>2</width></LineStyle><PolyStyle><color>7F7F7F7F</color><fill>1</fill><outline>1</outline></PolyStyle></Style>";
            string GreenStyle = "<Style id=\"green\"><LineStyle><color>7F7F7F7F</color><width>2</width></LineStyle><PolyStyle><color>7F00FF00</color><fill>1</fill><outline>1</outline></PolyStyle></Style>";
            string BlueStyle = "<Style id=\"blue\"><LineStyle><color>7F7F7F7F</color><width>2</width></LineStyle><PolyStyle><color>7F7F7F7F</color><fill>1</fill><outline>1</outline></PolyStyle></Style>";


            //add styles to top
            int EndID = 0;
            EndID = NewKML.IndexOf("</name>") + 7;
            NewKML = NewKML.Insert(EndID, RedStyle);

            EndID = NewKML.IndexOf("</name>") + 7;
            NewKML = NewKML.Insert(EndID, BlackStyle);

            EndID = NewKML.IndexOf("</name>") + 7;
            NewKML = NewKML.Insert(EndID, GreenStyle);

            EndID = NewKML.IndexOf("</name>") + 7;
            NewKML = NewKML.Insert(EndID, BlueStyle);

            //add each style to each placemark


            foreach (Data MyDataSingle in MyData)
            {
                int NamePos = NewKML.IndexOf(MyDataSingle.Name);

                if (NamePos == -1) throw new Exception("Did not find '" + MyDataSingle.Name + "' within File");
                NamePos += MyDataSingle.Name.Length + 7;

                int MultiGeometryStartPos = NewKML.IndexOf("<MultiGeometry>", NamePos);
                int MultiGeometryEndPos = NewKML.IndexOf("</MultiGeometry>", NamePos);
                int PolygonStartPos = NewKML.IndexOf("<Polygon>", NamePos);

                int InsertPos = 0;
                if (MultiGeometryStartPos < PolygonStartPos)
                {
                    if (MultiGeometryStartPos != -1)
                    {
                        InsertPos = MultiGeometryStartPos;
                    }
                    else
                    {
                        InsertPos = PolygonStartPos;
                    }
                }
                else
                {
                    InsertPos = PolygonStartPos;
                }

                if (MyDataSingle.Red)
                {
                    NewKML = NewKML.Insert(InsertPos, "<styleUrl>#red</styleUrl>");
                }
                if (MyDataSingle.Black)
                {
                    NewKML = NewKML.Insert(InsertPos, "<styleUrl>#black</styleUrl>");
                }
                if (MyDataSingle.Green)
                {
                    NewKML = NewKML.Insert(InsertPos, "<styleUrl>#green</styleUrl>");
                }
                if (MyDataSingle.Blue)
                {
                    NewKML = NewKML.Insert(InsertPos, "<styleUrl>#blue</styleUrl>");
                }
            }

            string NewFileName = WriteFile(NewKML, URLName);

            return NewFileName;
        }
        catch (Exception ex)
        {
            return ex.ToString();
        }
    }

    public string WriteFile(string KMLData, string URLName)
    {
        string FileName = "http:\\blah.co.uk\blah.kml";
        StreamWriter writer = new StreamWriter("C:/inetpub/blah.kml");

        writer.Write(KMLData);
        writer.Flush();
        writer.Close();

        return FileName;
    }

    public string ReadFile(string URL)
    {
        string File = "";
        StreamReader reader = new StreamReader(WebRequest.Create(URL).GetResponse().GetResponseStream());
        string line;
        while ((line = reader.ReadLine()) != null)
        {
            File += line;
        }

        return File;
    }

来源：https://stackoverflow.com/questions/5992241/dynamically-change-colour-of-kml-polygon-in-google-maps-api-v3