javascript - 如何在谷歌地图API中使用多边形字符串

标签 javascript google-maps google-maps-api-3 geojson

我有以下多边形字符串:

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 Maps 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) 等更有效的替代方法

最佳答案

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

proof of concept fiddle

screenshot of map

代码片段:

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>

关于javascript - 如何在谷歌地图API中使用多边形字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30820071/

相关文章:

javascript - 在 Meteor 中访问订阅时出现问题

java - 如何根据当前位置获取最近的地点(用户输入的)?

javascript - 使用标记使 Google map 以响应式调整大小为中心

javascript - Twitter Bootstrap 模态窗口阴影未关闭

javascript - Ruby 的 "unless"的 JavaScript 等价物是什么?

android - 上传谷歌室内地图? & 如何查看?

javascript - 将 VueJS 组件渲染到 Google Map Infowindow

google-maps-api-3 - Google Maps API v3-通过地址获取 map ?

javascript - 从 MySQL 数据库更新 Google map 上标记 "Live"的更改坐标

javascript - 用 js 函数 window.history.back() 添加一个参数