如何使用geojson通过谷歌地图的setStyle函数获取虚线

Question

i am trying to get the dashed line by linestring of geojson in google map. and i can't use the polyline for this dashed line i have to use the linestring of geojon. so how can i set the style of dashed line in setStyle function for dahsed line. what should i try to do this. here is the fiddle link : http://jsfiddle.net/geocodezip/7z078g8e/1/

   var map;
 function initMap() {
   map = new google.maps.Map(document.getElementById('map'), {
   center: {lng: -73.945259, lat: 41.133659},
   zoom: 15
 });

 map.data.addGeoJson({ "type": "FeatureCollection",
   "features": [
   { "type": "Feature",
     "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
     "properties": {"prop0": "value0"}
   },
   { "type": "Feature",
     "geometry": {

  "type": "LineString",
  "coordinates": [
     [-73.945259094199997, 41.133659362800003],
     [-73.945625305199997, 41.178726196299998],
     [-73.978820800799994, 41.2158432007],
     [-73.978256225600006, 41.249233245799999],
     [-73.954887390099998, 41.288650512700002],
     [-73.986076354999994, 41.322223663300001],
     [-73.965789794900004, 41.352313995400003],
     [-73.957283020000006, 41.382507324199999],
     [-73.968963622999993, 41.410072326700003],
     [-73.989562988299994, 41.439929962199997],
     [-74.015953064000001, 41.464096069299998],
     [-74.006843566900002, 41.499134063699998],
     [-73.999168396000002, 41.5377388],
     [-73.9613571167,      41.581764221199997],
     [-73.956344604500003, 41.627635955800002],
     [-73.948852539100002, 41.678043365500002],
     [-73.946556091299996, 41.729282379200001],
     [-73.9569854736,      41.7779464722],
     [-73.9701004028,      41.828430175800001],
     [-73.985443115199999, 41.881973266599999],
     [-74.006584167499994, 41.924633026099997],
     [-73.991699218799994, 41.975730896000002],
     [-73.982696533199999, 42.033111572300001],
     [-73.962783813499996, 42.085037231400001]
     ]
  }
                  }]});
 map.data.setStyle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 10,
    });
  }

 google.maps.event.addDomListener(window, "load", initMap);

Answer 1

As a first cut add the "dashed line" styling from the example in the documentation

var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};
map.data.setStyle({
  strokeColor: "#FF0000",
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
});

proof of concept fiddle

code snippet:

 var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lng: -73.945259,lat: 41.133659}, zoom: 15 }); // Define a symbol using SVG path notation, with an opacity of 1. var lineSymbol = { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }; map.data.setStyle({ strokeColor: "#FF0000", strokeOpacity: 0, icons: [{ icon: lineSymbol, offset: '0', repeat: '20px' }], }); map.data.addGeoJson({ "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [102.0, 0.5] }, "properties": { "prop0": "value0" } }, { "type": "Feature", "geometry": { "type": "LineString", "coordinates": [ [-73.945259094199997, 41.133659362800003], [-73.945625305199997, 41.178726196299998], [-73.978820800799994, 41.2158432007], [-73.978256225600006, 41.249233245799999], [-73.954887390099998, 41.288650512700002], [-73.986076354999994, 41.322223663300001], [-73.965789794900004, 41.352313995400003], [-73.957283020000006, 41.382507324199999], [-73.968963622999993, 41.410072326700003], [-73.989562988299994, 41.439929962199997], [-74.015953064000001, 41.464096069299998], [-74.006843566900002, 41.499134063699998], [-73.999168396000002, 41.5377388], [-73.9613571167, 41.581764221199997], [-73.956344604500003, 41.627635955800002], [-73.948852539100002, 41.678043365500002], [-73.946556091299996, 41.729282379200001], [-73.9569854736, 41.7779464722], [-73.9701004028, 41.828430175800001], [-73.985443115199999, 41.881973266599999], [-74.006584167499994, 41.924633026099997], [-73.991699218799994, 41.975730896000002], [-73.982696533199999, 42.033111572300001], [-73.962783813499996, 42.085037231400001] ] } } ] }); } google.maps.event.addDomListener(window, "load", initMap); 

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

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>