字符串中的多边形位置

Polygon locations from string?

本文关键字：位置 多边形 字符串      更新时间：2023-09-26

我有一个字符串包含多边形的位置。我的问题是，我无法弄清楚如何将这个字符串转换回我可以使用的纬度 lng 对象，以将多边形绘制到谷歌地图上。

这是我的数据

var geometry = "(55.595892233825545, 12.663964033126831),(55.595486072831385, 12.66323447227478),(55.5953284569849, 12.665669918060303),(55.59621352237994, 12.664951086044312)"
var polygon = new google.maps.Polygon({
   paths: geometry,
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#FF0000',
   fillOpacity: 0.35
});

但显然，这是行不通的。我试图找到一个函数，将我的字符串转换回位置对象，但没有运气。

有什么想法吗？

将字符串解析为 google.maps.LatLng 对象，将这些对象用于 google.maps.Polygon。

var geometry = "(55.595892233825545, 12.663964033126831),(55.595486072831385, 12.66323447227478),(55.5953284569849, 12.665669918060303),(55.59621352237994, 12.664951086044312)";
// Get rid of outside ().
geometry = geometry.substring(1, geometry.length - 1); 
// remove extra spaces
var coordStr = geometry.replace(/,'s/g,","); 
var coordsArray = coordStr.split("),(");
var path = [];
for (var i=0; i<coordsArray.length;i++) {
   var coords = coordsArray[i].split(",");
   var pt = new google.maps.LatLng(
   parseFloat(coords[0]),
   parseFloat(coords[1]));
   path.push(pt);
}
var polygon = new google.maps.Polygon({
   paths: path,
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#FF0000',
   fillOpacity: 0.35
});

概念验证小提琴

代码片段：

var geocoder;
var map;
function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var geometry = "(55.595892233825545, 12.663964033126831),(55.595486072831385, 12.66323447227478),(55.5953284569849, 12.665669918060303),(55.59621352237994, 12.664951086044312)";
  // Get rid of outside ().
  geometry = geometry.substring(1, geometry.length - 1);
  // remove extra spaces
  var coordStr = geometry.replace(/,'s/g, ",");
  var coordsArray = coordStr.split("),(");
  var path = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < coordsArray.length; i++) {
    var coords = coordsArray[i].split(",");
    var pt = new google.maps.LatLng(
      parseFloat(coords[0]),
      parseFloat(coords[1]));
    path.push(pt);
    bounds.extend(pt)
  }
  map.fitBounds(bounds);
  var polygon = new google.maps.Polygon({
    paths: path,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

根据这些信息，也许这会有所帮助。

该解决方案获取所有数字，并将它们重新组合成带有点对象的数组。

function getCoords(string) {
    var coords = [];
    string.match(/['d.]+/g).map(Number).forEach(function (a, i) {
        if (i % 2) {
            coords[coords.length - 1].lng = a;
        } else {
            coords.push({ lat: a });
        }
    });
    return coords;
}
var geometry = "(55.595892233825545, 12.663964033126831),(55.595486072831385, 12.66323447227478),(55.5953284569849, 12.665669918060303),(55.59621352237994, 12.664951086044312)",
    coords = getCoords(geometry),
    polygon = /* new google.maps.Polygon( */ {
        paths: coords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    } /* ) */;
document.write('<pre>' + JSON.stringify(polygon, 0, 4) + '</pre>');

geocodezip是对的，

重点是将字符串解析为google.maps.LatLng的数组，并在创建时将其用作多边形选项中的路径。

如果需要在动态逻辑中加载点，可以稍后设置路径。

    var oNewPolygon = new google.maps.Polygon(polygonOptions);
    oNewPolygon.setMap(this.m_oMap);
    /*... ... ....
    'dynamic logics of loading polygon path
    'and parsing the string to polygonpaths(array of google.maps.LatLng)
    .......... draw the map.........*/
    oNewPolygon.setPaths(polygonpaths);
相关文章：