从多边形阵列中删除多边形的子集

Question

我在谷歌地图上分组绘制多边形。每个组都有一个唯一的颜色，传递到html/JavaScript中。

从Delphi 调用

function MarkArea(Lat, Lng, otherColor) {
    var latLng = new google.maps.LatLng(Lat,Lng);
    drawUserGrids(latLng, otherColor);
}

js 中调用的函数

    function drawUserGrids(point, otherColor) {
    // Square limits
 //  these are QtrMinutes stored in the database and drawn
        var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
        var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);
        var gridLineSquare = [
            new google.maps.LatLng(bottomLeftLat, bottomLeftLong),  //lwr left
            new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)),  //lwr right
            new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)),  //upr right
            new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)];  //upr left

        drawGridBox = true;
        if (drawGridBox == true) {
            gridUserArea = new google.maps.Polygon({
                path: gridLineSquare,
                draggable:false,
                geodesic:true,
                editable :false,
                fillColor:  otherColor,   << unique
                fillOpacity: 0.35,
                strokeColor: "#CC0099",
                strokeOpacity: 0.1,
                strokeWeight: 1
            });
            gridUserArea.setMap(map);
            userGridArray.push(gridUserArea);
        }
    }

按填充颜色取消映射组的功能

function deListOneColor(otherColor){
    if (userGridArray) {
        for (var i in userGridArray) {
          if (userGridArray[i].gridUserArea.fillColor == otherColor)
            userGridArray[i].setMap(null);
        }
    }
}

我的目标是为用户提供一种基于颜色取消映射特定区域的方法。

JS向我抛出一个错误：无法获取未定义或null引用的属性"fillColor"。

我是否正确访问多边形？

Answer 1

MVCE

google.maps.Polygon没有userGridArea属性（如果需要，可以在上创建，但不需要）。这对我有效：

function deListOneColor(otherColor) {
  if (userGridArray) {
    for (var i in userGridArray) {
      if (userGridArray[i].get("fillColor") == otherColor)
        userGridArray[i].setMap(null);
    }
  }
}

概念验证小提琴

代码片段：

var map;
var userGridArray = [];
function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  drawUserGrids(map.getCenter(), "#FF0000");
  drawUserGrids(new google.maps.LatLng(37.639097, -120.996878), "#0000FF");
  google.maps.event.addDomListener(document.getElementById('deletebtn'), 'click', function() {
    deListOneColor(document.getElementById('color').value);
  });
}
google.maps.event.addDomListener(window, "load", initialize);
var llOffset = 0.25;
function drawUserGrids(point, otherColor) {
  // Square limits
  //  these are QtrMinutes stored in the database and drawn
  var bottomLeftLat = (Math.floor(point.lat() / llOffset) * llOffset);
  var bottomLeftLong = (Math.floor(point.lng() / llOffset) * llOffset);
  var gridLineSquare = [
    new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
    new google.maps.LatLng(bottomLeftLat, (bottomLeftLong + llOffset)), //lwr right
    new google.maps.LatLng((bottomLeftLat + llOffset), (bottomLeftLong + llOffset)), //upr right
    new google.maps.LatLng((bottomLeftLat + llOffset), bottomLeftLong)
  ]; //upr left
  drawGridBox = true;
  if (drawGridBox == true) {
    gridUserArea = new google.maps.Polygon({
      path: gridLineSquare,
      draggable: false,
      geodesic: true,
      editable: false,
      fillColor: otherColor,
      fillOpacity: 0.35,
      strokeColor: "#CC0099",
      strokeOpacity: 0.1,
      strokeWeight: 1
    });
    gridUserArea.setMap(map);
    userGridArray.push(gridUserArea);
  }
}
function deListOneColor(otherColor) {
  if (userGridArray) {
    for (var i in userGridArray) {
      if (userGridArray[i].get("fillColor") == otherColor)
        userGridArray[i].setMap(null);
    }
  }
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="delete" id="deletebtn" />
<input value="#FF0000" id="color" />
<div id="map_canvas"></div>