如何在 google 地图 api 中使用多边形字符串

Question

我有以下多边形字符串：

POLYGON ((5.031728766 52.016855117, 5.039437914 52.018712029, 5.038732065 52.01933205, 5.03880625 52.019536002, 5.036666299 52.021123062, 5.037225302 52.021436208, 5.036494826 52.021980534, 5.040069034 52.024180983, 5.041131857 52.023541011, 5.041485972 52.023745389, 5.042328698 52.023235595, 5.043167194 52.022781293, 5.043379189 52.022938683, 5.04366399 52.022788333, 5.044615961 52.023393034, 5.046878469 52.022023355, 5.047609948 52.02119413, 5.048777737 52.022018526, 5.049465821 52.022060318, 5.05135083 52.021274278999996, 5.053039915 52.020873436, 5.052288001 52.019935439, 5.052174884 52.019294199, 5.053026298 52.019318482, 5.053120663 52.018982405, 5.05237284 52.018935127, 5.051442801 52.019120203, 5.046607457 52.016128313, 5.046220739 52.015628312, 5.04412241 52.015134981, 5.043853082 52.015544473, 5.043410675 52.015932024, 5.042704158 52.016254485, 5.042235947 52.016357569, 5.040118936 52.0166409, 5.039579367 52.015163505, 5.034087326 52.015907152, 5.03224395 52.016039016, 5.031728766 52.016855117), (5.043324081 52.017406693, 5.046676295 52.019354241, 5.048003676 52.020235065, 5.046772806 52.021010583, 5.045897693 52.02180469, 5.043619067 52.020981305, 5.042189351 52.020258164, 5.039736347 52.018909018, 5.041350353 52.018037167, 5.042763839 52.01739758, 5.042763839 52.01739758, 5.043324081 52.017406693))

我想用它来绘制 simple polygon 使用 Google 地图 API，例如：

var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];

我怎样才能：

遍历文本并获取坐标
使用 google.maps.LatLng(POLYGONTEXTSTRING)

Answer 1

使用 this related question: Polygon array does not work in Google map API 中的修改代码。您的字符串格式略有不同，不知道是不是故意的。

proof of concept fiddle

代码片段：

var map;
var bounds = new google.maps.LatLngBounds();

// your POLYGON
var polygonStr = "POLYGON ((5.031728766 52.016855117, 5.039437914 52.018712029, 5.038732065 52.01933205, 5.03880625 52.019536002, 5.036666299 52.021123062, 5.037225302 52.021436208, 5.036494826 52.021980534, 5.040069034 52.024180983, 5.041131857 52.023541011, 5.041485972 52.023745389, 5.042328698 52.023235595, 5.043167194 52.022781293, 5.043379189 52.022938683, 5.04366399 52.022788333, 5.044615961 52.023393034, 5.046878469 52.022023355, 5.047609948 52.02119413, 5.048777737 52.022018526, 5.049465821 52.022060318, 5.05135083 52.021274278999996, 5.053039915 52.020873436, 5.052288001 52.019935439, 5.052174884 52.019294199, 5.053026298 52.019318482, 5.053120663 52.018982405, 5.05237284 52.018935127, 5.051442801 52.019120203, 5.046607457 52.016128313, 5.046220739 52.015628312, 5.04412241 52.015134981, 5.043853082 52.015544473, 5.043410675 52.015932024, 5.042704158 52.016254485, 5.042235947 52.016357569, 5.040118936 52.0166409, 5.039579367 52.015163505, 5.034087326 52.015907152, 5.03224395 52.016039016, 5.031728766 52.016855117), (5.043324081 52.017406693, 5.046676295 52.019354241, 5.048003676 52.020235065, 5.046772806 52.021010583, 5.045897693 52.02180469, 5.043619067 52.020981305, 5.042189351 52.020258164, 5.039736347 52.018909018, 5.041350353 52.018037167, 5.042763839 52.01739758, 5.042763839 52.01739758, 5.043324081 52.017406693))";


function initialize() {
  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
    });
  drawPoly(polygonStr);
  map.fitBounds(bounds);

}

function drawPoly(multipolygonWKT) {
  var polylines = [];
  var toReturn = [];
  multipolygonWKT = multipolygonWKT.replace("POLYGON ", "");
  var formattedValues = multipolygonWKT.replace("))", "");
  formattedValues = formattedValues.replace("((", "");

  var linesCoords = formattedValues.split("), (");

  for (i = 0; i < linesCoords.length; i++) {
    polylines[i] = [];
    var singleLine = linesCoords[i].split(", ");

    for (j = 0; j < singleLine.length; j++) {
      var coordinates = singleLine[j].split(" ");
      var latlng = new google.maps.LatLng(parseFloat(coordinates[1]), parseFloat(coordinates[0]));
      bounds.extend(latlng);

      polylines[i].push(latlng);

    }
  }

  toReturn.push(
    new google.maps.Polygon({
      map: map,
      paths: polylines,
      strokeColor: 'red',
      strokeOpacity: 1,
      strokeWeight: 2,
      zIndex: 1
    }));
  return toReturn;
}

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<div id="map_canvas"border: 2px solid #3872ac;"></div>

Answer 2

由于 google.maps.Polygon 对象的 paths 参数需要指定 google.maps.LatLng 的数组，以下示例演示如何解析输入字符串：

function parsePolygonPaths(svalue)
{
    var result = [];
    var r = /\(([^)]+)\)/g;
    svalue = svalue.slice(9, -1);
    while (matches = r.exec(svalue)) {
       var vals = matches[1].split(',');
       var coords = vals.map(function(val){
          var ll = val.trim().split(' ');
          return new google.maps.LatLng(ll[0], ll[1]);  
       });
       result.push(coords);
    }
    return result;
}

It is assumed that input string has the following format:

POLYGON ((lat11 lng11,..lat1n,lng1n),(lat21 lng21,..lat2n,lng2n),..(latn1 lngn1,..latnn,lngnn))

Returned value:

[
  [google.maps.LatLng(lat11,lng11),..google.maps.LatLng(lat1n,lng1n)]
  [google.maps.LatLng(lat21,lng21),..google.maps.LatLng(lat2n,lng2n)]
 ..
  [google.maps.LatLng(latn1,lngn1),..google.maps.LatLng(latnn,lngnn)]
]

例子

var polygonString = 'POLYGON ((5.031728766 52.016855117, 5.039437914 52.018712029, 5.038732065 52.01933205, 5.03880625 52.019536002, 5.036666299 52.021123062, 5.037225302 52.021436208, 5.036494826 52.021980534, 5.040069034 52.024180983, 5.041131857 52.023541011, 5.041485972 52.023745389, 5.042328698 52.023235595, 5.043167194 52.022781293, 5.043379189 52.022938683, 5.04366399 52.022788333, 5.044615961 52.023393034, 5.046878469 52.022023355, 5.047609948 52.02119413, 5.048777737 52.022018526, 5.049465821 52.022060318, 5.05135083 52.021274278999996, 5.053039915 52.020873436, 5.052288001 52.019935439, 5.052174884 52.019294199, 5.053026298 52.019318482, 5.053120663 52.018982405, 5.05237284 52.018935127, 5.051442801 52.019120203, 5.046607457 52.016128313, 5.046220739 52.015628312, 5.04412241 52.015134981, 5.043853082 52.015544473, 5.043410675 52.015932024, 5.042704158 52.016254485, 5.042235947 52.016357569, 5.040118936 52.0166409, 5.039579367 52.015163505, 5.034087326 52.015907152, 5.03224395 52.016039016, 5.031728766 52.016855117), (5.043324081 52.017406693, 5.046676295 52.019354241, 5.048003676 52.020235065, 5.046772806 52.021010583, 5.045897693 52.02180469, 5.043619067 52.020981305, 5.042189351 52.020258164, 5.039736347 52.018909018, 5.041350353 52.018037167, 5.042763839 52.01739758, 5.042763839 52.01739758, 5.043324081 52.017406693))';

function initialize() {
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };


    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    var result = parsePolygonPaths(polygonString);     
   
    var bounds = new google.maps.LatLngBounds();
    // Construct the polygon.
    result.forEach(function(coords){
           
          coords.forEach(function(loc){
              bounds.extend(loc); 
          });

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

    map.fitBounds(bounds);
    map.panToBounds(bounds);   
   
}

google.maps.event.addDomListener(window, 'load', initialize);



function parsePolygonPaths(svalue)
{
    var result = [];
    var r = /\(([^)]+)\)/g;
    svalue= svalue.slice(9, -1);
    while (matches = r.exec(svalue)) {
       var vals = matches[1].split(',');
       var coords = vals.map(function(val){
          var ll = val.trim().split(' ');
          return new google.maps.LatLng(ll[1], ll[0]);  
       });
       result.push(coords);
    }
    return result;
}

  html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
  }

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>

如何在 google 地图 api 中使用多边形字符串

How to use a polygon string in google maps api

javascript

google-maps

geojson

google-maps-api-3