导出KML谷歌地图

Question

I use google map APIv3, I create my map with different marker and I create an itinerary everything works. My question is: I want export my itinerary in KML file with javascript, I have make lot of serch but no good answer or tuto found, anyone have solution or export with javascript isn't possible? Maybe alternative solution is possible...

Answer 1

This is not a solution, and a bit half-assed. A year old nodejs-project I dug up. Maybe it can give you a few ideas.

Yeah, I realize you want a browser solution. (Sorry!)

Browser javascript doesn't work with files very well. But you absolutely can use data URI to make the data downloadable, or you can fill a textarea and let the user copy the KML by hand.

The actual KML is a simple xml-file, and you can generate it any way you see fit.

var kml = "<?xml version="1.0" encoding="UTF-8"?><kml ...";  // done?

You can use templates to make things easier.

Here is my server solution. It's pretty light weight, taking geotweets (json) for input and spitting out kml-files. I was using EJS for templating. I know EJS runs in the browser as well, so perhaps the following can help you a little at least.

My template file (This was for google earth, and probably don't work in google maps because of the LatLonQuad, and lines with altitude. But other than that I know gmaps kml are very, very similar to google earth kml, and more often than not it's cross-compatible):

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2">
    <Document>
        <Style id="whiteLine">
            <LineStyle>
                <color>ffffffff</color>
                <width>1</width>
            </LineStyle>
        </Style>
        <Placemark id="<%= id %>">
            <styleUrl>#whiteLine</styleUrl>
            <MultiGeometry>
                <LineString>
                    <altitudeMode>absolute</altitudeMode>
                    <coordinates>
                        <%= lineStart %>
                        <%= lineEnd %>
                    </coordinates>
                </LineString>
                <Polygon id="<%= id %>_poly">
                    <altitudeMode>absolute</altitudeMode>
                    <outerBoundaryIs>
                        <LinearRing>
                            <coordinates>
                                <%= quadP1 %>,<%= polyAltitude %>
                                <%= quadP2 %>,<%= polyAltitude %>
                                <%= quadP3 %>,<%= polyAltitude %>
                                <%= quadP4 %>,<%= polyAltitude %>
                                <%= quadP1 %>,<%= polyAltitude %>
                            </coordinates>
                        </LinearRing>
                    </outerBoundaryIs>
                </Polygon>
            </MultiGeometry>
        </Placemark>
        <GroundOverlay>
            <Icon>
                <href><%= image %></href>
                <viewBoundScale>0.75</viewBoundScale>
            </Icon>
            <altitudeMode>absolute</altitudeMode>
            <altitude><%= quadAltitude %></altitude>
            <gx:LatLonQuad>
                <coordinates>
                    <%= quadP1 %>
                    <%= quadP2 %>
                    <%= quadP3 %>
                    <%= quadP4 %>
                </coordinates>
            </gx:LatLonQuad>
        </GroundOverlay>
    </Document>
</kml>

And I feeded it data like this.

exports.generate = function (tweet, config, callback) {
    var ejs = require('ejs');
    var fs = require('fs');

    // ... Omitted stuff for brewity

    fs.readFile(config.kmlTemplate, 'utf8', function (err, template) {
        var content = ejs.render(template, {
            id           : tweet.id_str,
            lineStart    : geo[1].toString() + ',' + geo[0].toString() + ',' + altitude,
            lineEnd      : geo[1].toString() + ',' + geo[0].toString() + ',0',
            image        : config.imageUrl + tweet.id_str + '.png',
            quadAltitude : altitude,
            polyAltitude : altitude - 1,
            quadP1       : ( geo[1] - width ).toString() + ',' + ( geo[0] - height ).toString(),
            quadP2       : ( geo[1] + width ).toString() + ',' + ( geo[0] - height ).toString(),
            quadP3       : ( geo[1] + width ).toString() + ',' + ( geo[0] + height ).toString(),
            quadP4       : ( geo[1] - width ).toString() + ',' + ( geo[0] + height ).toString()
        });

        fs.writeFile(config.kmlPath + tweet.id_str + '.kml', content, function (err) {
            if (err) { console.log(err); }
            else { callback(); }
        });
    });

Also google's KML reference is all you really need, but it's a nightmare to go through.