Google Maps Statik Harita API'si yolu KML'den

Question

Haritaya görüntü dönüştürmek için çalışıyorum. Okuduktan sonra, işaretleyicileri ve görüntüyü haritadan dönüştürme yolunu isteyebileceğimizi öğrendim.

Durumumda, haritaya yüklenen tüm işaretçileri ve KML dosyalarını dönüştürmem gerekiyor.

http://maps.google.com/maps/api/staticmap?center=38.267028,-82.83526899999998,&size=640x640&zoom=6&maptype=terrain&markers=icon:http://www.energymapit.com/Images/greensmallnew.PNG|37.52,-82.82|38.27,-82.84

Bu defa belirteçler için yaptıklarını olduğunu. Ve yolu (line) için kullanılan parametreler aşağıdaki yol = 40,737102, -73,990318 | 40,749825, -73,987963

Sorum ben kml dosyadan koordinatları veya yol ayıklayabilirsiniz nasıl? javascript veya C# olarak onları almak için herhangi bir yolu?

KML dosya formatım aşağıda gösterildiği gibidir.

<?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" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/kml/2.2 http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd http://www.google.com/kml/ext/2.2 http://code.google.com/apis/kml/schema/kml22gx.xsd"> 
 
    <Document id="INGAA_pipes"> 
 
    <name>Big_Sandy</name> 
 
    <Snippet> 
 
    </Snippet> 
 
    <Folder id="FeatureLayer0"> 
 
        <name>Big_Sandy</name> 
 
        <Placemark id="ID_00285"> 
 
         <name>Big_Sandy</name> 
 
         <MultiGeometry> 
 
          <LineString> 
 
\t <coordinates> -82.80105535917727,37.52602539768943,-4.116736818104982e-008 -82.80111801439419,37.52589238167445,-4.116736818104982e-008 -82.80111927760422,37.52577818748876,-4.116736818104982e-008 -82.80114454180459,37.5256663934021,-4.116736818104982e-008 -82.8011922911433,37.5255863058869,-4.116736818104982e-008 -82.80125355682921,37.52548360691238,-4.116736818104982e-008 -82.8013201279972,37.52536082289856,-4.116736818104982e-008 -82.80122475564077,37.52531496837487,-4.116736818104982e-008 -82.80110197162695,37.52525989241806,-4.116736818104982e-008 -82.80100849408557,37.52521997498147,-4.116736818104982e-008 -82.80088154147867,37.5251686886547,-4.116736818104982e-008 -82.80077341070107,37.52512700272408,-4.116736818104982e-008 -82.80064355271114,37.52507836913836,-4.116736818104982e-008 -82.80051470528923,37.52502784073761,-4.116736818104982e-008 -82.80039242655941,37.52497705969486,-4.116736818104982e-008 -82.80026572659453,37.52492375223206,-4.116736818104982e-008 
 
     </coordinates> 
 
\t </LineString> 
 
         </MultiGeometry> 
 
        </Placemark> 
 
       </Folder> 
 
      <Style id="LineStyle00"> 
 
     <LabelStyle> 
 
     <color>00000000</color> 
 
     <scale>0.000000</scale> 
 
     </LabelStyle> 
 
     <LineStyle> 
 
     <color>ffa8a800</color> 
 
     <width>3.0</width> 
 
     </LineStyle> 
 
     <PolyStyle> 
 
     <color>00000000</color> 
 
     <outline>0</outline> 
 
     </PolyStyle> 
 
    </Style> 
 
    </Document> 
 
</kml>

Answer 1

Seçeneklerden biri, KML ayrıştırmak için geoxml3 (veya geoxml-v3 gibi benzer üçüncü taraf ayrıştırıcı) kullanmak onun çıkışından koordinatlarını alıp ve statik bir harita oluşturmak için bu kullanmaktır.

İlgili Soru: GMap Drawing tools to image jpeg (static map URL)

kod parçacığı:

gibi KML dosya görünüm ne yapar

var map; 
 
var overlays = []; 
 

 
google.maps.drawing = { 
 
    OverlayType: { 
 
    MARKER: "MARKER", 
 
    POLYLINE: "POLYLINE", 
 
    POLYGON: "POLYGON" 
 
    } 
 
}; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(-27.37777, -51.592762), 
 
    zoom: 16 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 
    google.maps.event.addListener(map, 'click', function(evt) { 
 
    document.getElementById('info').innerHTML = evt.latLng.toUrlValue(6); 
 
    }); 
 
    var geoXml = new geoXML3.parser({ 
 
    map: map, 
 
    singleInfoWindow: true 
 
    }); 
 
    geoXml.parseKmlString(kmlLineStr); 
 
    for (var i = 0; i < geoXml.docs[0].gpolylines.length; i++) { 
 
    overlays.push({ 
 
     overlay: geoXml.docs[0].gpolylines[i], 
 
     type: google.maps.drawing.OverlayType.POLYLINE 
 
    }); 
 
    } 
 
    createStaticMap(); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
function createStaticMap() { 
 
    var fillC, strokeC, weight, path; 
 
    var staticMap = "https://maps.googleapis.com/maps/api/staticmap?size=512x512&maptype=roadmap"; 
 
    var markersStr = "&markers=" 
 
    for (var i = 0; i < overlays.length; i++) { 
 
    if (overlays[i].type == google.maps.drawing.OverlayType.POLYGON || overlays[i].type == google.maps.drawing.OverlayType.POLYLINE) { 
 
     path = encodeURIComponent(google.maps.geometry.encoding.encodePath(overlays[i].overlay.getPath())); 
 
     if (overlays[i].type == google.maps.drawing.OverlayType.POLYGON) { 
 
     fillC = overlays[i].overlay.get("fillColor"); 
 
     strokeC = overlays[i].overlay.get("strokeColor"); 
 
     weight = overlays[i].overlay.get("strokeWeight"); 
 
     staticMap += "&path="; 
 
     if (typeof fillC != "undefined") staticMap += "fillcolor:" + fillC.replace(/#/, "0x"); 
 
     if (typeof weight != "undefined") staticMap += "%7Cweight:" + weight; 
 
     else staticMap += "%7Cweight:0"; 
 
     if (typeof strokeC != "undefined") staticMap += "%7Ccolor:" + strokeC.replace(/#/, "0x"); 
 
     staticMap += "%7Cenc:" + path; 
 
     } else if (overlays[i].type == google.maps.drawing.OverlayType.MARKER) { 
 
     if (markersStr != "") markersStr += "|"; 
 
     markersStr += overlays[i].overlay.getPosition().toUrlValue(6); 
 
     } 
 
    } 
 
    if (overlays[i].type == google.maps.drawing.OverlayType.POLYLINE) { 
 
     fillC = overlays[i].overlay.get("fillColor"); 
 
     strokeC = overlays[i].overlay.get("strokeColor"); 
 
     weight = overlays[i].overlay.get("strokeWeight"); 
 

 
     staticMap += "&path="; 
 
     if ((typeof weight != "undefined") && (weight > 1)) staticMap += "weight:" + weight; 
 
     else staticMap += "weight:2"; 
 
     if (typeof strokeC != "undefined") staticMap += "%7Ccolor:" + strokeC.replace(/#/, "0x"); 
 
     staticMap += "%7Cenc:" + path; 
 
    } 
 
    } 
 
    staticMap += markersStr; 
 
    document.getElementById('staticMap').innerHTML = staticMap; 
 
    document.getElementById('imageholder').innerHTML = "<img src='" + staticMap + "' alt='static map'/> "; 
 
    document.getElementById('urllen').innerHTML = "URL length =" + staticMap.length + " characters"; 
 
} 
 

 
var kmlLineStr = '<?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" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/kml/2.2 http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd http://www.google.com/kml/ext/2.2 http://code.google.com/apis/kml/schema/kml22gx.xsd"><Document id="INGAA_pipes"><name>Big_Sandy</name><Snippet></Snippet><Folder id="FeatureLayer0"><name>Big_Sandy</name><Placemark id="ID_00285"><name>Big_Sandy</name><MultiGeometry><LineString><coordinates>-82.80105535917727,37.52602539768943,-4.116736818104982e-008 -82.80111801439419,37.52589238167445,-4.116736818104982e-008 -82.80111927760422,37.52577818748876,-4.116736818104982e-008 -82.80114454180459,37.5256663934021,-4.116736818104982e-008 -82.8011922911433,37.5255863058869,-4.116736818104982e-008 -82.80125355682921,37.52548360691238,-4.116736818104982e-008 -82.8013201279972,37.52536082289856,-4.116736818104982e-008 -82.80122475564077,37.52531496837487,-4.116736818104982e-008 -82.80110197162695,37.52525989241806,-4.116736818104982e-008 -82.80100849408557,37.52521997498147,-4.116736818104982e-008 -82.80088154147867,37.5251686886547,-4.116736818104982e-008 -82.80077341070107,37.52512700272408,-4.116736818104982e-008 -82.80064355271114,37.52507836913836,-4.116736818104982e-008 -82.80051470528923,37.52502784073761,-4.116736818104982e-008 -82.80039242655941,37.52497705969486,-4.116736818104982e-008 -82.80026572659453,37.52492375223206,-4.116736818104982e-008  </coordinates></LineString></MultiGeometry></Placemark></Folder><Style id="LineStyle00"><LabelStyle><color>00000000</color><scale>0.000000</scale></LabelStyle><LineStyle><color>ffa8a800</color><width>3.0</width></LineStyle><PolyStyle><color>00000000</color><outline>0</outline></PolyStyle></Style></Document></kml>';

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
#panel { 
 
    width: 200px; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 13px; 
 
    float: right; 
 
    margin: 10px; 
 
} 
 
#color-palette { 
 
    clear: both; 
 
} 
 
.color-button { 
 
    width: 14px; 
 
    height: 14px; 
 
    font-size: 0; 
 
    margin: 2px; 
 
    float: left; 
 
    cursor: pointer; 
 
} 
 
#delete-button { 
 
    margin-top: 5px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<script src="https://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script> 
 
<h4>Static Map</h4> 
 
<div id="imageholder"></div> 
 
<div id="urllen"></div> 
 
<div id="info"></div> 
 
<h4>Google Maps Javascript API v3 Map</h4> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div> 
 
<h4>Static Map URL</h4> 
 
<div id="staticMap"></div>