将 Google Maps 多边形路径转换为 SVG 路径答案

【问题标题】：Convert a Google Maps polygon path to an SVG path将 Google Maps 多边形路径转换为 SVG 路径
【发布时间】：2015-03-06 20:09:01
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript google-maps svg path polygon

【解决方案1】：

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

对于墨卡托投影，您可以在此处找到公式：https://stackoverflow.com/a/14457180/459897

基于此公式的 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-pairs 的序列，由 AniV 的答案中所见的空格分隔（但我猜你知道如何处理 svg-path）。

当您转换路径时，在您存储的位置创建 4 个变量：

最小 x 值
max-x-value
最小值
最大值

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

viewBox 的 4 个参数是：

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

Demo（画美国的形状）：http://jsfiddle.net/doktormolle/9xhsL39u/

(注意：该演示加载了maps-API，但仅用于路径解码，使用的路径非常复杂，因此进行了编码。maps-API不是必需的坐标转换/svg-绘图）

【讨论】：

完美运行。在不使用解码和使用单个多边形的情况下，我不得不像这样格式化我的数据： var paths = []; polygon.getPaths().forEach(function (x) { paths.push(x.getArray()); });
@Dr.Mollie 感谢代码示例！我很难将多边形渲染为轮廓而不是填充。只需将填充属性更改为无并设置笔触即可使用笔触颜色填充整个 SVG，而我调整路径格式的尝试都没有奏效。您对如何实现大纲有任何见解吗？
@DaveMorro : 将g 的填充设置为none 和path 所需的笔触（而不是g）jsfiddle.net/doktormolle/eg58oupw
这是否解释了地球的曲率？

【解决方案2】：

这里是绘制多边形的基本 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 = 10 等.

希望这会有所帮助！

【讨论】：