首页
前端开发
将事件侦听器应用于可编辑的多边形

将事件侦听器应用于可编辑的多边形 [英] Apply event listener to an editable polygon

查看：83 发布时间：2018/5/14 11:36:49 javascript google-maps-api-3

本文介绍了将事件侦听器应用于可编辑的多边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在用户更改边界时将事件侦听器添加到Google maps可编辑多边形？

我尝试了下面的代码。 p>

代码片段（来自链接的小提琴）： data-lang =jsdata-hide =truedata-console =falsedata-babel =false>

html，body {height：100％;保证金：0; padding：0;}＃map {height：100％;}

< div id =map>< / div>< script> var PolygonPath;函数initMap（）{var map = new google.maps.Map（document.getElementById（'map'），{zoom：8，center：{lat：0，lng：0}}）; PolygonPath = new google.maps.Polygon（{strokeColor：'＃FF8C00'，strokeOpacity：1.0，strokeWeight：3，editable：true，// geodesic：true，map：map}）;的console.log（PolygonPath）; google.maps.event.addListener（map，'click'，function（e）{addLatLng（e）;}）; google.maps.event.addListener（PolygonPath，'drag'，function（e）{window.alert（Hi）;}）; } function addLatLng（event）{pathLine = PolygonPath.getPath（）; pathLine.push（event.latLng）; // ValueUnit = google.maps.geometry.spherical.computeArea（pathLine）; }< / script>< script src =https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMapasync defer>< / script>

Polygon的路径：
$ b $ pre $ lt; code> google.maps.event.addListener（PolygonPath.getPath（），'insert_at'，function（evt）{
document.getElementById（'info'）。innerHTML = PolygonPath.getPath（）。getAt（evt）.toUrlValue（6）;
}）;

MVCArray （适用于多边形路径）：

insert_at - 添加顶点

remove_at - 删除顶点

set_at - 更改顶点

在多边形路径上实现insert_at和set_at侦听器的代码片段：
$ b

html，body {height：100％;保证金：0; padding：0;}＃map {height：100％;}

< div id =info>< / div>< div id =map>< / div>< script> var PolygonPath;函数initMap（）{var map = new google.maps.Map（document.getElementById（'map'），{zoom：8，center：{lat：0，lng：0}}）; PolygonPath = new google.maps.Polygon（{strokeColor：'＃FF8C00'，strokeOpacity：1.0，strokeWeight：3，editable：true，// geodesic：true，map：map}）;的console.log（PolygonPath）; google.maps.event.addListener（PolygonPath.getPath（），'insert_at'，function（evt）{document.getElementById（'info'）。innerHTML =insert：+ PolygonPath.getPath（）。getAt（evt）。 toUrlValue（6）;}）google.maps.event.addListener（PolygonPath.getPath（），'set_at'，function（evt）{document.getElementById（'info'）。innerHTML =set：+ PolygonPath.getPath ）.getAt（evt）.toUrlValue（6）;}）google.maps.event.addListener（map，'click'，function（e）{addLatLng（e）;}）; google.maps.event.addListener（PolygonPath，'drag'，function（e）{window.alert（Hi）;}）; } function addLatLng（event）{pathLine = PolygonPath.getPath（）; pathLine.push（event.latLng）; // ValueUnit = google.maps.geometry.spherical.computeArea（pathLine）; }< / script>< script src =https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMapasync defer>< / script>

How to add a event listener to a google maps editable Polygon when the user changes its boundary?

I tried the code below. Here is a Fiddle example
google.maps.event.addListener(PolygonPath, 'drag', function(e) { window.alert("Hi"); });
This is what I want:

code snippet (from linked fiddle):

html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }

<div id="map"></div> <script> var PolygonPath; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: { lat: 0, lng: 0 } }); PolygonPath = new google.maps.Polygon({ strokeColor: '#FF8C00', strokeOpacity: 1.0, strokeWeight: 3, editable: true, //geodesic: true, map: map }); console.log(PolygonPath); google.maps.event.addListener(map, 'click', function(e) { addLatLng(e); }); google.maps.event.addListener(PolygonPath, 'drag', function(e) { window.alert("Hi"); }); } function addLatLng(event) { pathLine = PolygonPath.getPath(); pathLine.push(event.latLng); //ValueUnit = google.maps.geometry.spherical.computeArea(pathLine); } </script> <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>

解决方案
You need to add the event listener to the Polygon's path:
google.maps.event.addListener(PolygonPath.getPath(), 'insert_at', function(evt) { document.getElementById('info').innerHTML = PolygonPath.getPath().getAt(evt).toUrlValue(6); });
There are three interesting events on an MVCArray (as they apply to a Polygon path):

insert_at - add a vertex

remove_at - delete a vertex

set_at - change a vertex

code snippet implementing insert_at and set_at listeners on the Polygon path:

html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }

<div id="info"></div> <div id="map"></div> <script> var PolygonPath; function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: { lat: 0, lng: 0 } }); PolygonPath = new google.maps.Polygon({ strokeColor: '#FF8C00', strokeOpacity: 1.0, strokeWeight: 3, editable: true, //geodesic: true, map: map }); console.log(PolygonPath); google.maps.event.addListener(PolygonPath.getPath(), 'insert_at', function(evt) { document.getElementById('info').innerHTML = "insert:" + PolygonPath.getPath().getAt(evt).toUrlValue(6); }) google.maps.event.addListener(PolygonPath.getPath(), 'set_at', function(evt) { document.getElementById('info').innerHTML = "set:" + PolygonPath.getPath().getAt(evt).toUrlValue(6); }) google.maps.event.addListener(map, 'click', function(e) { addLatLng(e); }); google.maps.event.addListener(PolygonPath, 'drag', function(e) { window.alert("Hi"); }); } function addLatLng(event) { pathLine = PolygonPath.getPath(); pathLine.push(event.latLng); //ValueUnit = google.maps.geometry.spherical.computeArea(pathLine); } </script> <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>

这篇关于将事件侦听器应用于可编辑的多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

相关文章

将散列模式应用于openlayers中的多边形;

将JS函数和事件侦听器应用于多个html元素;

多边形内多边形多边形内多边形;

如何使用网格图形系统将交叉阴影应用于多边形？;

Fabric js：如何将圆角应用于路径&多边形;

多边形内多边形内多边形;

将图像作为填充图案应用于多边形不会改变其样式;

将重叠的多边形合并为单个多边形;

WPF，多边形和多边形;

多边形中的点，多个多边形;

凹面和凸面多边形-将任意多边形变成凸面多边形;

使用Java将多边形伸展到其他多边形;

带孔的多边形（复杂多边形）;

多边形索引列表中的相邻多边形;

多边形索引列表中的相邻多边形;

检查多边形是否在多边形内;

检查，如果多边形是多边形内;

点击FusionTablesLayer多边形时的事件;

多边形内的点到多边形边缘的距离;

将圆角应用到路径/多边形;

多边形轮廓到多边形的无序云点;

多边形轮廓到多边形的无序浊点;

Google Map：我可以将多边形转换为多边形的绘图管理器吗？;

多边形座标;

指向多边形;

前端开发最新文章

为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;

错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;

如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;

如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;

警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;

如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;

此请求已被阻止;内容必须通过HTTPS提供;

资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;

通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;

拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;

热门教程

Java教程

Apache ANT 教程

Kali Linux教程

JavaScript教程

JavaFx教程

MFC 教程

Apache HTTP客户端教程

Microsoft Visio 教程

热门工具

Java 在线工具

C(GCC) 在线工具

PHP 在线工具

C# 在线工具

Python 在线工具

MySQL 在线工具

VB.NET 在线工具

Lua 在线工具

Oracle 在线工具

C++(GCC) 在线工具

Go 在线工具

Fortran 在线工具

登录关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.