javascript - 将解码后的路径转换为javascript中的坐标？

Question

我有这个编码路径encodedPath，它同样oyky@e}|kGpv@kzE，然后我尝试使用decodePath对其进行解码，例如这个:

 decodeString = google.maps.geometry.encoding.decodePath(encodeString);

这是我控制台记录它的时候 `console.log(decodeString);

但是当我警告它时，这是准确的数据:

(9.5684, 44.062430000000006),(9.559510000000001, 44.097530000000006)

所以，我的问题是，该数据是否可以再次转换为路径并用它绘制折线？因为当我尝试绘制这样的折线时:

var path = [
   (9.5684, 44.062430000000006),
   (9.559510000000001, 44.097530000000006)
]

var polyline = new google.maps.Polyline({
    path: d,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 5
});
polyline.setMap(map);

它显示的是:

InvalidValueError: at index 0: not a LatLng or LatLngLiteral with finite coordinates: not an Object

Answer 1

google.maps.geometry.encoding.decodePath返回 google.maps.LatLng 的数组对象，您可以将返回的值直接传递到折线的 path 属性中:

var poly = new google.maps.Polyline({
  strokeColor: '#000000',
  strokeOpacity: 1,
  strokeWeight: 3,
  map: map,
  path: google.maps.geometry.encoding.decodePath("oyky@e}|kGpv@kzE")
});

(您的 path 数组不是有效的 JavaScript 数组)

proof of concept fiddle

代码片段:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {
      lat: 34.366,
      lng: -89.519
    }
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map,
    path: google.maps.geometry.encoding.decodePath("oyky@e}|kGpv@kzE")
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < poly.getPath().getLength(); i++) {
    bounds.extend(poly.getPath().getAt(i));
    console.log(poly.getPath().getAt(i).toUrlValue(6));
  }
  map.fitBounds(bounds);
}

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

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap" async defer></script>