Question

我有一个包含多边形位置的字符串。我的问题是，我无法弄清楚如何将此字符串转换回我可以使用的lat 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
});

但显然，这不起作用。我试图找到一个函数，将我的字符串转换回location对象，但没有运气。

有什么想法吗？

Answer 1

将字符串解析为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
});

proof of concept fiddle

代码段

＆＃13;

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);

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

＆＃13;

Answer 2

根据这个information，也许这会有所帮助。

解决方案获取所有数字并将它们重组为带有点对象的数组。

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>');

Answer 3

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);

字符串中的多边形位置？

3 个答案: