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'
  }]
});

任何类型的帮助表示赞赏。

提前致谢。

修改：更新了整个函数的问题+ docs [0]，这会引发undefined。

Answer 1

你需要（正如你在你的问题中所说）等到解析kml文件之后（使用＆＃34;解析＆＃34;事件监听器或＆＃34; afterParse＆＃34;函数）。

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

代码段

＆＃13;

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>';

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用geoXml3在解析的kml文件的Google Maps上显示虚线/虚线？

1 个答案: