0

我使用https://github.com/geocodezip/geoxml3来可视化谷歌地图上的 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] 更新问题，这会引发未定义。

4

1 回答 1

0

您需要（正如您在问题中所说）等到解析 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'
      }]
    });
  };
});

概念证明小提琴

结果地图的屏幕截图

代码片段：

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>

于 2017-10-05T10:27:32.087 回答