GeoXml3で解析されたkmlファイルのGoogleマップ上に点線/破線を表示する方法は？

Question

私はhttps://github.com/geocodezip/geoxml3を使用してGoogleマップ上のkmlファイルを視覚化していますが、うまく機能しますが、線のスタイルを点線または点線に変更したいと思います。 私は、KMLファイルの後で解析されていることを試してみた：

function drawRoute(array,color,stringNumber){ 

if (typeof myParser != "undefined") { 
    myParser.parse(array); //array is local kml file 
} 
else{ 
    var myParser = new geoXML3.parser({map: map}); 
    myParser.parse(array); 
} 

var lineSymbol = { 
        path: 'M 0,0 0,0', 
        strokeOpacity: 1, 
        scale: 4 
        }; 
     for (var i = 0; i < myParser.docs[0].gpolylines.length; i++){ 
    myParser.docs[0].gpolylines[i].setOptions({ 
    strokeOpacity: 0, 
    icons: [{ 
    icon: lineSymbol, 
    offset: '0', 
    repeat: '20px' 
    }] 
}); 

感謝ヘルプのいずれかのタイプを。

ありがとうございます。

編集：全体機能+質問[0]で質問が更新されました。未定義です。

Answer 1

あなたは（あなたの質問で言うように）kmlファイルが解析されるまで待つ必要があります（「解析済み」イベントリスナーまたは「afterParse」関数を使用して）。

google.maps.event.addListener(myParser, 'parsed', function() { 
    for (var i = 0; i < myParser.docs[0].gpolylines.length; i++) { 
    myParser.docs[0].gpolylines[i].setOptions({ 
     strokeOpacity: 0, 
     icons: [{ 
     icon: lineSymbol, 
     offset: '0', 
     repeat: '20px' 
     }] 
    }); 
    }; 
}); 

proof of concept fiddle

コードスニペット：

var myParser = null; 
 
var map = null; 
 
var myLatLng = null; 
 

 
function initialize() { 
 
    myLatLng = new google.maps.LatLng(37.422104808, -122.0838851); 
 

 
    var myOptions = { 
 
    zoom: 18, 
 
    center: new google.maps.LatLng(37.422104808, -122.0838851), 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    myOptions); 
 

 
    myParser = new geoXML3.parser({ 
 
    map: map, 
 
    singleInfoWindow: true, 
 
    }); 
 
    google.maps.event.addListener(myParser, 'parsed', function() { 
 
    var lineSymbol = { 
 
     path: 'M 0,0 0,0', 
 
     strokeOpacity: 1, 
 
     scale: 4 
 
    }; 
 
    for (var i = 0; i < myParser.docs[0].gpolylines.length; i++) { 
 
     myParser.docs[0].gpolylines[i].setOptions({ 
 
     strokeOpacity: 0, 
 
     icons: [{ 
 
      icon: lineSymbol, 
 
      offset: '0', 
 
      repeat: '20px' 
 
     }] 
 
     }); 
 
    }; 
 
    }); 
 
    myParser.parseKmlString(kmlStr); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var kmlStr = '<?xml version="1.0" encoding="utf-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Document> <name>tennis-lines</name><open>1</open><Placemark><name>outside</name><LineString><coordinates>-122.43193945401,37.801983684521 -122.431564131101,37.8020327731402 -122.431499536494,37.801715236748 -122.43187136387,37.8016634915437 -122.43193945401,37.801983684521</coordinates></LineString></Placemark><Placemark><name>west</name><LineString><coordinates> -122.431885303019,37.8019316061803 -122.431762847554,37.8019476932246 -122.431719843168,37.8017374462006 -122.431841863906,37.8017213314352 -122.431885303019,37.8019316061803</coordinates></LineString></Placemark><Placemark><name>east</name><LineString> <coordinates>-122.431714248439,37.8019544341044 -122.431592404659,37.8019694509363 -122.431548777661,37.8017591041777 -122.431671453253,37.8017428443014 -122.431714248439,37.8019544341044</coordinates></LineString></Placemark></Document></kml>';

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script> 
 
<div id="map_canvas"></div>