将 SVG 多边形路径转换为经纬度坐标答案

【问题标题】：Convert SVG polygon path to lat and long coordinates将 SVG 多边形路径转换为经纬度坐标
【发布时间】：2016-08-31 17:09:59
【问题描述】：

tl;dr:如何将 SVG 多边形路径转换为 gps 坐标或相同的 google.maps.Polygon？

我的高级目标是确定 20,000 个单独的 GPS 坐标是否在固定区域（地理围栏）内。我已经保存了 gps 坐标，并且我对如何测试它们是否在该区域有一个基本的想法。

我现在正在尝试将路径转换为 GPS 纬度/经度，我确信这只是一个公式，我需要协调 0,0 和比例 - 这个答案很有希望：https://stackoverflow.com/a/24171749/550595，我用于“转换”，但结果甚至不接近。

我有一个 SVG 多边形路径，是从另一张地图（不是谷歌地图，但它足够近）借来的，我在地图上渲染了它：https://jsfiddle.net/2n2jmj8L/1/

var width = 624, // width of SVG
  height = 746; // height of SVG

function toLongitude(x) {
  return x * 180 / width;
}

function toLatitude(y) {
  return -y * 180 / width + 90;
}

function initMap() {
  // The SVG path;
  var path = document.getElementById("reservation-path").getAttribute("d");

  // Get the points. Even indices are x coordinates and odd indices are y
  // coordinates. Note that these are strings.
  var points = path.match(/(\d+)/g);

  map = new google.maps.Map(document.getElementById('map'), {
    streetViewControl: false,
    //scrollwheel: false,
    disableDefaultUI: true,
    draggable: false,
    zoom: 11,
    center: {
      lat: 41.3671863,
      lng: -123.8799729
    },
    mapTypeId: 'roadmap'
  });

  // Map polygon coordinates
  var polyCoordinates = [];
  for (var i = 0; i < points.length; i += 2) {
    var longitude = toLongitude(parseInt(points[i]) + 6),//I added the 6 and the following 5 to offset the parent transform
      latitude = toLatitude(parseInt(points[i + 1]) + 5);

    polyCoordinates.push(new google.maps.LatLng(latitude, longitude));
  }

  console.log(polyCoordinates);

  var polygon = new google.maps.Polygon({
    paths: polyCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  polygon.setMap(map);

  // Add a listener for the click event.
  polygon.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

附带说明... Google Maps/Places 列出了我想用作地理围栏的区域：https://www.google.com/maps/place/Yurok+Reservation,+Trinity-Klamath,+CA/@41.373847,-123.9471508,11z/data=!4m5!3m4!1s0x54d1a8156f591fd5:0xbcbca4e17d7d8801!8m2!3d41.3724029!4d-123.9009415，但除了将其用作参考之外，我无能为力。

我已经在这方面浪费了太多时间，所以即使我需要废弃我拥有的东西，我也会这样做。我想要做的就是能够遍历一组坐标，如果它们在我的 JSFiddle 的路径中，则返回。

提前谢谢...

【问题讨论】：

标签： javascript google-maps svg geolocation geometry

【解决方案1】：

此页面似乎记录了如何将屏幕像素坐标转换为纬度/经度坐标。

https://developers.google.com/maps/documentation/javascript/examples/map-coordinates

【讨论】：

我希望我能早几个小时得到这个答案，因为我认为你正在做一些事情； project 函数的 return new google.maps.Point 中的公式可以根据我的需要进行修改。相反，我很不耐烦，使用 google.maps.drawing 工具用多边形粗略地勾勒出轮廓，然后在控制台中返回坐标。通过在 SVG 元素上设置 pointer-events: none; CSS 规则，我能够在顶部覆盖原始 SVG 路径，并且仍然在地图上绘制。不理想，但它奏效了。我会将此标记为答案，因为它更接近我最初想要的。谢谢。