Google Maps＆Turf.js折線集成

Question

我正在研究谷歌地圖和草皮js集成的示例。我在GeoJson數據中添加了該行。附帶工作片段。但是我想從草皮線位置創建一個折線。

for (var j = 0; j < line.geometry.coordinates.length; j++) { 
    var wp = new google.maps.LatLng(line.geometry.coordinates[j][1], line.geometry.coordinates[j][0]) 
    path.push(wp); 
} 

我試圖創建一個路徑，然後創建基於這條道路上我的折線，但不能設法創建一個輸出路徑草皮線陣列。

任何想法我該怎麼做？

提前致謝！

var path = []; 
 
\t \t var map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t zoom: 2, 
 
\t \t maxZoom: 8, 
 
\t \t minZoom: 1, 
 
\t \t center: { 
 
\t \t  lat: 0, 
 
\t \t  lng: -180 
 
\t \t }, 
 
\t \t streetViewControl: false, 
 
\t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t }); 
 

 
var line = { 
 
    "type": "Feature", 
 
    "properties": { "line": "on" }, 
 
    "geometry": { 
 
     "type": "LineString", 
 
     "coordinates": [ 
 
     [-122.214, 37.772], 
 
    [-157.821, 21.291], 
 
    [178.431, -18.142], 
 
    [153.027, -27.467] 
 
     ] 
 
    } 
 
    }; 
 
    map.data.addGeoJson(line); 
 
     
 
     
 
     
 
    var point = turf.point([185.431, -4.542]); 
 

 
\t \t var marker = new google.maps.Marker({ 
 
\t \t position: new google.maps.LatLng(point.geometry.coordinates[1], point.geometry.coordinates[0]), 
 
\t \t map: map, 
 
\t \t });

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://npmcdn.com/@turf/turf@4.7.2/turf.min.js"></script> 
 
<div id="map"></div>

Answer 1

我解決了它，我只是沒有看到它... ...

$.each(line.geometry.coordinates, function (key) { 
    var wp = { lat: line.geometry.coordinates[key][1], lng: line.geometry.coordinates[key][0] } 
    path.push(wp); 
}); 

Answer 2

你需要創建一個折線，並將其添加到地圖：

var polyline = new google.maps.Polyline({ 
    path: path 
}); 

polyline.setMap(map);