Как получить пунктирную линию с помощью функции setStyle карты Google с Geojson - PullRequest
Новая
       9

Как получить пунктирную линию с помощью функции setStyle карты Google с Geojson

0 голосов
/ 22 мая 2018

Я пытаюсь получить пунктирную линию по линии геоджона на карте Google.и я не могу использовать ломаную линию для этой пунктирной линии, я должен использовать линейную линию geojon.Так, как я могу установить стиль пунктирной линии в функции setStyle для штриховой линии.что я должен попытаться сделать это.вот ссылка на скрипку: 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);

1 Ответ

0 голосов
/ 22 мая 2018

В качестве первого среза добавьте стиль «пунктирная линия» из пример в документации 

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

подтверждение концепции скрипта

screenshot of resulting map

фрагмент кода: 

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