Question

我们看到有关此问题的相互矛盾的文档，但是是否可以使用编码折线来渲染复杂的多边形（带有孔/甜甜圈的那些）？

我认为扭转卷绕方向应该有效，但开发人员告诉我们编码折线不支持此功能。

非常感谢任何帮助。

Answer 1

Google地图的路径编码可以是一维数组，而不是二维数组（我的意思是数组＆lt;数组＆gt;不可能）。

但是，绘制具有孔的多边形需要二维数组。（你可能知道）

所以代码应该是这样的：

var exteriorBoundary = google.maps.geometry.encoding.decode("<encoded polyline string>";
var hole = google.maps.geometry.encoding.decode("<another encoded polyline string>";

var polygon = new google.maps.Polygon({
  paths: [exteriorBoundary, hole],
  map: map,
  ...
});

Answer 2

有可能，您需要单独编码/解码内部和外部路径。

var donut = new google.maps.Polygon({
             paths: [google.maps.geometry.encoding.decodePath(encodedOP),
             google.maps.geometry.encoding.decodePath(encodedIP)],
             strokeColor: "#0000FF",
             strokeOpacity: 0.8,
             strokeWeight: 2,
             fillColor: "#FF0000",
             fillOpacity: 0.35
           });

代码段

function initialize() {
  var myOptions = {
    zoom: 7,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  var encodedOP = "~a|mEsmnd\\{av@dpEa~s@njRgyo@~l^gxi@|hi@wbb@tpr@abYdyy@eaOfy~@slDzjaArlDzjaAdaOfy~@`bYdyy@vbb@tpr@fxi@|hi@fyo@~l^`~s@njRzav@dpEzav@epE`~s@ojRfyo@_m^fxi@}hi@vbb@upr@`bYeyy@daOgy~@rlD{jaAslD{jaAeaOgy~@abYeyy@wbb@upr@gxi@}hi@gyo@_m^a~s@ojR{av@epE";
  var encodedIP = "pp`mEwaa_\\lpZqgBlpZpgBpnYvtH`lW`vNtkT|cTzpPzwXn`L`l\\``Gb|^xuA|d`@yuA|d`@a`Gb|^o`L`l\\{pPzwXukT|cTalW`vNqnYvtHmpZpgBmpZqgBqnYwtHalWavNukT}cT{pP{wXo`Lal\\a`Gc|^yuA}d`@xuA}d`@``Gc|^n`Lal\\zpP{wXtkT}cT`lWavNpnYwtH";
  var donut = new google.maps.Polygon({
    paths: [google.maps.geometry.encoding.decodePath(encodedOP),
      google.maps.geometry.encoding.decodePath(encodedIP)
    ],
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });
  donut.setMap(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?libraries=geometry"></script>
<div id="map_canvas"></div>

使用编码折线的多边形孔

2 个答案: