将 Google 地图多边形路径转换为 SVG 路径

Question

当用户使用内置绘图管理器在 Google 地图中绘制多边形时，我会保存多边形路径。我想将这个多边形路径转换为 SVG 路径，这样我就可以轻松地重现绘制的多边形的形状，而不需要大量额外的地图加载和调用 Google 地图 API.

我确定这只是一些相当琐碎的数学运算，但不知道如何去做。我是否需要在这些点周围创建一个边界框并将其转换为 LatLng 0、0，然后再缩小它，或者我是否可以仅使用每个点的 LatLng 坐标来做一些更简单的事情？

我发现很多问题要求实现相反的效果，将 SVG 转换为地图多边形，但不是这个。任何指出我正确方向的人都表示赞赏。

Answer 1

这是基本的 HTML 代码，当您有一组点时绘制多边形，您可以将其嵌入到 Javascript 函数中并使用地图对象调用。

<!DOCTYPE html>
<html>
<body>

<svg height="210" width="500">
<polygon points="200,10 250,190 160,210,102,108" style="fill:red;stroke:purple;stroke-     width:1" />
</svg>
</body>
</html>

在这里，您可以将 x 和 y 坐标替换为用户输入的特定位置的经纬度变量，以便在第一个点 x1 = 200 和 y1 的 map.For 示例上绘制多边形= 10 同样。

希望这会有所帮助！！

Answer 2

您不能直接使用坐标，您首先必须根据投影将它们转换为点。

对于墨卡托投影，您可以在此处找到公式：

基于此公式的 javascript-函数可能如下所示：

/**
  *@param latLng object with properties lat and lng(of the coordinate)
  *@return object with properties x and y(of the translated latLng)
  **/
function latLng2point(latLng){

  return {
          x:(latLng.lng+180)*(256/360),
          y:(256/2)-(256*Math.log(Math.tan((Math.PI/4)
                     +((latLng.lat*Math.PI/180)/2)))/(2*Math.PI))
         };
}

通过此函数转换路径的坐标。 svg 中的路径是一系列 x,y 对，由 space 分隔，如 AniV 的答案所示（但我猜你知道如何处理 svg-path）。

当你转换路径时，在你存储的地方创建 4 个变量：

最小 x 值
最大 x 值
最小 y 值
最大 y 值

这些变量用于计算 svg 元素的 viewBox。

viewBox 的 4 个参数是：

x：使用minX
y: 使用minY
宽度：使用(maxX-minX)
身高: 使用(maxY-minY)

演示（绘制美国的形状）：http://jsfiddle.net/doktormolle/9xhsL39u/

(注意：演示加载了地图-API，但仅出于路径解码的目的，使用的路径非常复杂，因此进行了编码。 coordinate-conversion/svg-drawing)

不需要 maps-API

将 Google 地图多边形路径转换为 SVG 路径

Convert a Google Maps polygon path to an SVG path

javascript

svg

google-maps

polygon

path

将 Google 地图多边形路径转换为 ​​SVG 路径

Convert a Google Maps polygon path to an SVG path

javascript

svg

google-maps

polygon

path

将 Google 地图多边形路径转换为 SVG 路径