如何删除带孔多边形上的顶点(节点)(Google 地图 V3)

2023-11-29

我从以下位置获取了这个示例(解决方案)伊恩·格兰杰,但我添加了一个带内孔的多边形。

这个例子对于外部顶点路径工作正常,但对于内部顶点路径则不行。

我需要为内部和外部节点实现事件监听器,因为在内部顶点发生火灾事件时,删除外部顶点。效果不太好。

有人可以提供一些关于如何解决这个问题的示例吗?


您的问题之一是其中有一个洞的多边形有多个(在本例中是两个)路径,并且您没有为两条路径上的更改添加侦听器。下面是一个概念证明,它并不完美,有时标记是孤立的,但应该是一个起点。双击顶点下方的蓝色标记将其删除(我无法让您的“X”可靠地工作)。

概念证明小提琴

使用白色标记更新概念证明

代码片段:

var G = google.maps;
var zoom = 8;
var centerPoint = new G.LatLng(37.286172, -121.80929);
var map;


$(function() {
  // create options object
  var myOptions = {
    center: centerPoint,
    zoom: zoom,
    mapTypeId: G.MapTypeId.ROADMAP
  };

  // create map with options
  map = new G.Map($("#map_canvas")[0], myOptions);

  addPolygon(map);
});


function addPolygon(map) {
  var paths = [
    [new G.LatLng(37.686172, -122.20929),
      new G.LatLng(37.696172, -121.40929),
      new G.LatLng(36.706172, -121.40929),
      new G.LatLng(36.716172, -122.20929),
      new G.LatLng(37.686172, -122.20929)
    ],

    [new G.LatLng(37.486172, -122.00929),
      new G.LatLng(37.086172, -122.00929),
      new G.LatLng(37.086172, -121.60929),
      new G.LatLng(37.486172, -121.60929),
      new G.LatLng(37.486172, -122.00929)
    ]
  ];

  poly = new G.Polygon({
    clickable: false,
    paths: paths,
    map: map
  });
  polygonBinder(poly);
  poly.setEditable(true);
  G.event.addListener(poly.getPaths().getAt(0), 'insert_at', addClickMarker0);
  G.event.addListener(poly.getPaths().getAt(1), 'insert_at', addClickMarker1);
}

function polygonBinder(poly) {
  poly.binder0 = new MVCArrayBinder(poly.getPaths().getAt(0));
  poly.binder1 = new MVCArrayBinder(poly.getPaths().getAt(1));
  poly.markers = [];
  for (var i = 0; i < poly.getPaths().getLength(); i++) {
    poly.markers[i] = [];
    for (var j = 0; j < poly.getPaths().getAt(i).getLength(); j++) {
      var mark = new G.Marker({
        map: map,
        icon: {
          path: G.SymbolPath.CIRCLE,
          scale: 8,
          strokeWeight: 2,
          strokeColor: 'blue',
          fillColor: 'blue',
          fillOpacity: 1
        },
        draggable: true,
        title: "double click to delete [" + i + "," + j + "]",
        position: poly.getPaths().getAt(i).getAt(j)
      });
      poly.markers[i][j] = mark;
      mark.bindTo('position', poly["binder" + i], (j).toString());
      G.event.addListener(mark, "dblclick", deleteMark);
    }
  }

}

function addClickMarker0(index) {
  addClickMarker(index, 0);
}

function addClickMarker1(index) {
  addClickMarker(index, 1);
}

function deleteMark(evt) {
  var minDist = Number.MAX_VALUE;
  var minPathIdx = -1;
  var minIdx = -1;
  var i, j;
  for (i = 0; i < poly.getPaths().getLength(); i++) {
    for (j = 0; j < poly.getPaths().getAt(i).getLength(); j++) {
      var distance = G.geometry.spherical.computeDistanceBetween(evt.latLng, poly.getPaths().getAt(i).getAt(j));
      if (distance < minDist) {
        minDist = distance;
        minPathIdx = i;
        minIdx = j;
      }
      if (distance < 10) {
        document.getElementById('info').innerHTML = "deleted path=" + i + " idx=" + j + " dist<10 minDist=" + minDist + " meters";
        poly.getPaths().getAt(i).removeAt(j);
        break;
      }
    }
  }
  if ((i == poly.getPaths().getLength()) && (j == poly.getPaths(i - 1).getLength())) {
    poly.getPaths().getAt(minPathIdx).removeAt(minIdx);
    document.getElementById('info').innerHTML = "deleted path=" + minPathIdx + " idx=" + minIdx + " dist=" + minDist + " meters";
  }
  this.setMap(null);
}

function addClickMarker(index, pathIdx) {
  var path = this;
  // rebind binder
  for (var i = 0; i < poly.markers[pathIdx].length; i++) {
    poly.markers[pathIdx][i].setMap(null);
  }
  poly.markers[pathIdx] = [];
  for (var i = 0; i < poly.getPaths().getAt(pathIdx).getLength(); i++) {
    var mark = new G.Marker({
      map: map,
      icon: {
        path: G.SymbolPath.CIRCLE,
        scale: 8,
        strokeWeight: 2,
        strokeColor: 'blue',
        fillColor: 'blue',
        fillOpacity: 1
      },
      draggable: true,
      title: "double click to delete [" + pathIdx + "," + i + "]",
      position: poly.getPaths().getAt(pathIdx).getAt(i)
    });
    poly.markers[pathIdx][i] = mark;
    mark.bindTo('position', poly["binder" + pathIdx], (i).toString());
    G.event.addListener(mark, "dblclick", deleteMark);
  }
}

function MVCArrayBinder(mvcArray) {
  this.array_ = mvcArray;
}
MVCArrayBinder.prototype = new google.maps.MVCObject();
MVCArrayBinder.prototype.get = function(key) {
  if (!isNaN(parseInt(key))) {
    return this.array_.getAt(parseInt(key));
  } else {
    this.array_.get(key);
  }
}
MVCArrayBinder.prototype.set = function(key, val) {
  if (!isNaN(parseInt(key))) {
    this.array_.setAt(parseInt(key), val);
  } else {
    this.array_.set(key, val);
  }
}
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing,geometry"></script>
<div id="info"></div>
<div id="map_canvas" style="width:100%; height:100%"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何删除带孔多边形上的顶点(节点)(Google 地图 V3) 的相关文章

  • 使用 C# 中的 Google 地图 API 和 SSIS 包获取行驶距离

    更新 找到了谷歌距离矩阵并尝试相应地修改我的代码 我在这里收到无效参数错误 return new GeoLocation dstnc uri ToString catch return new GeoLocation 0 0 https 基
  • 放大 Google 地图数据层

    我在集中和缩放数据层中的信息时遇到问题 我尝试使用这里建议的方法 stackoverflow 问题 在 Google Maps API v3 中缩放至 geojson 多边形边界 https stackoverflow com questi
  • Google API 和 OAuth 2.0 的正确重定向 URI

    我正在使用 Google Maps API 制作一个应用程序 我希望能够让一个人在一台计算机上观看另一个人在地图上编辑的内容 我正在考虑将地图信息传递到 Google Fusion Table 另一个人将能够将所有内容视为一层 我希望该程序
  • 快速计算三角形与单位正方形的交面积

    在我当前的项目中 我需要计算无限网格中三角形和单位正方形的交集面积 对于每个三角形 由三对浮点数给出 我需要知道面积 在区间内 0 1 它与它相交的每个正方形都有共同点 现在我将两者 三角形和正方形 转换为多边形并使用Sutherland
  • 谷歌地图上太多图钉的最佳解决方案

    这是我的 Google 地图 设置 我从数据库中读取了所有标记的位置 低于 300 将它们作为 Json 发送到 javascript 在 javascript 上 我解析 json 查看标记数组并创建一个新的 google maps Ma
  • 谷歌地图使用值 BESbswy 在内部创建隐藏的 div 和 span 并降低角度性能

    我在我的角度项目上使用谷歌地图 API v3 但是当我将地图添加到我的项目时 谷歌地图会创建一个隐藏的 div style height 1px width 1px span style font size 48px width 1 hei
  • 如何捕获 Google 地图的 OverQuotaMapError?

    如果我的 javascript 代码尝试在一天内加载 Google 地图 API 超过 25 000 次 那么 Google 会将 OverQuotaMapError 写入 window console 看https developers
  • Google 地图 API - 地图未显示 - 没有错误

    我正在尝试将地图从 Google API 加载到 div 中 但是 地图未加载 并且没有输出任何错误 这是代码 google maps var geocoder map function codeAddress address geocod
  • 使用javascript在谷歌地图中绘制多边形

    我想在谷歌地图中绘制多边形 我正在使用示例代码http jsfiddle net rvsMH 1 http jsfiddle net rvsMH 1 但它不起作用并且没有获取数组或纬度 经度值 我不知道出了什么问题
  • 带有方向的谷歌静态地图

    我的项目列表中有带有迷你地图的生成地点 地图上应该有 2 个点以及这两点之间的彩色道路方向 它应该看起来像这样 这应该是静态图片 因为页面上会有很多这样的不同方向的图片 但正如我所见 谷歌静态地图不允许绘制这样的图像 两点之间只能有直线 如
  • 如何解决 google 地图中的 addDomListener() 弃用问题

    当我打电话时addDomListener or addDomListenerOnce const domNode document getElementById google maps event addDomListener domNod
  • 使用 google 查询邮政编码距离

    我有两个邮政编码列表 R 语言 其中一个是孩子的地址及其学业成绩 另一个是学校的地址 我希望能够为每个孩子找到最近的学校 所以大概需要通过转换为长和纬度值来计算邮政编码之间的距离 然后我希望能够在谷歌地图上绘制每所学校的所有孩子 并看看住在
  • 如何在 Google Maps JS API 中获得仍包含一组纬度/经度坐标的最小 LatLngBounds?

    我需要在地图上绘制一组坐标以响应用户的选择 当发生这种情况时 我想平移地图以关注该组点 如何找到包含所有坐标的最小边界框 LatLngBounds 除了 Crescent Fresh 上面提到的 Stack Overflow 帖子 http
  • 如何检测谷歌地图是否加载成功

    我在我的网站中使用谷歌地图版本 3 我遇到了地图有时无法加载的问题 而是显示为灰色框 并且浏览器日志将充满错误 不幸的是 我现在无法获取日志 因为地图再次工作 根据一些研究 问题是因为我使用的实验版本 有没有办法查明地图是否已成功加载或崩溃
  • 谷歌地图 API 的替代品 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 Locked 这个问题及其答案是locked help locked posts因为这个问题是题外话 但却具有历史意义 目前不接受新的答案
  • 如何使用 sf::st_centroid 计算多边形的质心?

    我正在尝试使用新的 sf 包在 R 中操作一些巴西人口普查数据 我可以导入数据 但当我尝试创建原始多边形的质心时出现错误 library sf Donwload data filepath lt ftp geoftp ibge gov br
  • 如何为多边形创建内部螺旋?

    对于任何形状 我如何在其内部创建类似形状的螺旋 这与边界 使用 Minkowski 和 类似 尽管它会是相同形状的螺旋 而不是在形状内部创建相同的形状 我找到了这个 http www cis upenn edu cis110 13su le
  • Google 地图 API 标记图标 URL?

    我正在尝试将标记图标更改为 红圈 或 红针 或其他任何内容 在这些代码中 markerOptions icon images beachflag png 标记不显示 但如果我做icon一行注释行 因此标记显示为 red pin icon 所
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • Google 地图地址组件地理编码与地点 API - 短名称与长名称

    嘿 GMaps API 开发人员 首先 Google Maps JS API v3 是多么令人难以置信的产品和服务 非常感谢 现在 带着那重要的真诚的感激之情 The short name vs long name地址组件的选项是一个很好的

随机推荐