javascript - 从多边形数组中删除多边形子集

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 向我抛出一个错误:无法获取未定义或空引用的属性“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);
    }
  }
}

proof of concept fiddle

代码片段:

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>