javascript - 谷歌地图 API v3 如何获取所有形状的坐标-6ren

javascript - 谷歌地图 API v3 如何获取所有形状的坐标

转载作者：行者123 更新时间：2023-12-04 01:39:15

我有这个可以创建形状和删除形状的谷歌脚本，但没有太多关于保存形状的内容。

我查了一下互联网，知道我可以通过覆盖完成中的 getpaths() 访问路径坐标，我还可以将坐标推送到一个收集所有形状的数组中。但是，如果用户删除一个形状怎么办？或更新它？

我的问题是我不知道如何识别已删除的形状，以便我可以相应地更新形状集合数组

第二个问题是我不知道如何识别用户是否更新了形状以及更新了哪个形状。因此无法更新形状集合数组。

我需要一个解决方案，当单击保存按钮时。我可以获得 map 上存在的所有形状的坐标。所以我不必关心更新或删除的内容。我当前的代码如下:

 <!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry,places"></script>
<style>
    #map,html,body{
        height:100%;
        margin:0;
        padding:0;
    }
      #delete-button, #save-button {
        margin-top: 5px;
        position:absolute;
        z-index:999;
        right:6%;
        top:3%;
      }
      #save-button{
        right:1%;
      }
</style>
</head>
<body>
<div id="map"></div>
<button id="delete-button" class="btn">Delete seleted shape</button>
<button id="save-button" class="btn" onclick="save();">Save all</button>

<script>
    var drawingManager;
    var selectedShape;
    var shapeCollection = [];


    function save(){
        console.log(shapeCollection);
    }

    function clearSelection() {
        if (selectedShape) {
            selectedShape.setEditable(false);
            selectedShape = null;
        }
    }
    function setSelection(shape) {
        clearSelection();
        selectedShape = shape;
        shape.setEditable(true);
    }
    function deleteSelectedShape() {
        if (selectedShape) {
            selectedShape.setMap(null);
        }
    }
    function initialize() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom:10,
            center: new google.maps.LatLng(22.344, 114.048),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        });

        var polyOptions = {
            strokeWeight: 3,
            fillOpacity: 0.2,
            editable: true,
            draggable: true
        };
        // Creates a drawing manager attached to the map that allows the user to draw
        // markers, lines, and shapes.
        drawingManager = new google.maps.drawing.DrawingManager({
            drawingControl: true,
            drawingControlOptions: {
                drawingModes: [google.maps.drawing.OverlayType.POLYGON]
            },
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            polygonOptions: polyOptions,
            map: map
        });

        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {

            drawingManager.setDrawingMode(null);

            // Add an event listener that selects the newly-drawn shape when the user
            // mouses down on it.
            var newShape = e.overlay;
            newShape.type = e.type;
            google.maps.event.addListener(newShape, 'click', function() {
                setSelection(newShape);
            });
            setSelection(newShape);

        });

        //polygonPoints will be the array and index of the array will be the order
        // Clear the current selection when the drawing mode is changed, or when the
        // map is clicked.
        google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
        google.maps.event.addListener(map, 'click', clearSelection);
        google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>

</body>
</html>

最佳答案

为形状创建一个唯一的属性(ID)并将形状存储在一个对象中(使用 ID 作为键)。

当你想删除一个形状时，你可以使用 delete从集合中删除形状(基于形状的 ID)。

您不必关心用户的更新，当您将形状(引用)存储在集合中时，它们会自动更新。

演示:

function initialize() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom:10,
            center: new google.maps.LatLng(22.344, 114.048),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            noClear:true
        });
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM]
          .push(document.getElementById('save-button'));
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM]
          .push(document.getElementById('delete-button'));
        var polyOptions = {
            strokeWeight: 3,
            fillOpacity: 0.2
        };
        
        var shapes={
          collection:{},
          selectedShape:null,
          add:function(e){
            var shape=e.overlay,
                that=this;
            shape.type=e.type;
            shape.id=new Date().getTime()+'_'+Math.floor(Math.random()*1000);
            this.collection[shape.id]=shape;
            this.setSelection(shape);
            google.maps.event.addListener(shape,'click',function(){
              that.setSelection(this);
            });
          },
          setSelection:function(shape){
            if(this.selectedShape!==shape){
              this.clearSelection();
              this.selectedShape = shape;
              shape.set('draggable',true);
              shape.set('editable',true);
            }
          },
          deleteSelected:function(){
          
            if(this.selectedShape){
              var shape= this.selectedShape;
              this.clearSelection();
              shape.setMap(null);
              delete this.collection[shape.id];
            }
           },
          
          
          clearSelection:function(){
            if(this.selectedShape){
              this.selectedShape.set('draggable',false);
              this.selectedShape.set('editable',false);
              this.selectedShape=null;
            }
          },
          save:function(){
            var collection=[];
            for(var k in this.collection){
              var shape=this.collection[k],
                  types=google.maps.drawing.OverlayType;
              switch(shape.type){
                case types.POLYGON:
                   collection.push({ type:shape.type,
                                     path:google.maps.geometry.encoding
                                      .encodePath(shape.getPath())});
                  break;
                default:
                  alert('implement a storage-method for '+shape.type)
              }
            }
            //collection is the result
            console.log(collection);
          }
        };
        
         var drawingManager = new google.maps.drawing.DrawingManager({
            drawingControl: true,
            drawingControlOptions: {
                drawingModes: [google.maps.drawing.OverlayType.POLYGON]
            },
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            polygonOptions: polyOptions,
            map: map
        });

        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
            drawingManager.setDrawingMode(null);
            shapes.add(e);
        });


        google.maps.event.addListener(drawingManager, 
                                      'drawingmode_changed', 
                                      function(){shapes.clearSelection();});
        google.maps.event.addListener(map, 
                                      'click', 
                                      function(){shapes.clearSelection();});
        google.maps.event.addDomListener(document.getElementById('delete-button'), 
                                      'click', 
                                      function(){shapes.deleteSelected();});
        google.maps.event.addDomListener(document.getElementById('save-button'), 
                                      'click', 
                                      function(){shapes.save();});

    }

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

<div id="map">
  <button id="delete-button" class="btn">Delete selected shape</button>
  <button id="save-button" class="btn">Save all</button>
</div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry,places&v=3&callback=initialize"></script>

演示包括 load - 自动加载形状的方法:

function initialize() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom:9,
            center: new google.maps.LatLng(22.344, 114.048),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            noClear:true
        });
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM]
          .push(document.getElementById('save-button'));
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM]
          .push(document.getElementById('delete-button'));
        var polyOptions = {
            strokeWeight: 3,
            fillOpacity: 0.2
        };
        
        var shapes={
          collection:{},
          selectedShape:null,
          add:function(e,s){
            var shape=e.overlay,
                that=this;
            shape.type=e.type;
            shape.id=new Date().getTime()+'_'+Math.floor(Math.random()*1000);
            this.collection[shape.id]=shape;
            if(!s)this.setSelection(shape);
            google.maps.event.addListener(shape,'click',function(){
              that.setSelection(this);
            });
          },
          setSelection:function(shape){
            if(this.selectedShape!==shape){
              this.clearSelection();
              this.selectedShape = shape;
              shape.set('draggable',true);
              shape.set('editable',true);
            }
          },
          deleteSelected:function(){
          
            if(this.selectedShape){
              var shape= this.selectedShape;
              this.clearSelection();
              shape.setMap(null);
              delete this.collection[shape.id];
            }
           },
          
          
          clearSelection:function(){
            if(this.selectedShape){
              this.selectedShape.set('draggable',false);
              this.selectedShape.set('editable',false);
              this.selectedShape=null;
            }
          },
          save:function(){
            var collection=[];
            for(var k in this.collection){
              var shape=this.collection[k],
                  types=google.maps.drawing.OverlayType;
              switch(shape.type){
                case types.POLYGON:
                   collection.push({ type:shape.type,
                                     path:google.maps.geometry.encoding
                                      .encodePath(shape.getPath())});
                  break;
                default:
                  alert('implement a storage-method for '+shape.type)
              }
            }
            //collection is the result
            console.log(JSON.stringify(collection));
            return collection;
          },
          load:function(arr){
            var types=google.maps.drawing.OverlayType;
            for(var i=0;i<arr.length;++i){
              switch(arr[i].type){
                 case types.POLYGON:
                   var shape=new google.maps.Polygon(polyOptions);
                   shape.setOptions({map:map,
                                     path:google.maps.geometry.encoding
                                            .decodePath(arr[i].path)});
                   shapes.add({type:types.POLYGON,overlay:shape},true)
                  break;
                default:
                  alert('implement a loading-method for '+arr[i].type)
              }
            }
          }
        };
        
        //initially load some shapes
        shapes.load([{"type":"polygon","path":"_}sgCamyuT~ee@eP|FkdEskn@nr@rdH`wM"},
                     {"type":"polygon","path":"mnngCchxvT?y{DylG{{D~tFihCng_@v{O?wiVymDdPzNblLah\\i}LksLngJ"}]);
         var drawingManager = new google.maps.drawing.DrawingManager({
            drawingControl: true,
            drawingControlOptions: {
                drawingModes: [google.maps.drawing.OverlayType.POLYGON]
            },
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            polygonOptions: polyOptions,
            map: map
        });

        google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
            drawingManager.setDrawingMode(null);
            shapes.add(e);
        });


        google.maps.event.addListener(drawingManager, 
                                      'drawingmode_changed', 
                                      function(){shapes.clearSelection();});
        google.maps.event.addListener(map, 
                                      'click', 
                                      function(){shapes.clearSelection();});
        google.maps.event.addDomListener(document.getElementById('delete-button'), 
                                      'click', 
                                      function(){shapes.deleteSelected();});
        google.maps.event.addDomListener(document.getElementById('save-button'), 
                                      'click', 
                                      function(){shapes.save();});

    }

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

<div id="map">
  <button id="delete-button" class="btn">Delete selected shape</button>
  <button id="save-button" class="btn">Save all</button>
</div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry,places&v=3&callback=initialize"></script>

关于javascript - 谷歌地图 API v3 如何获取所有形状的坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32800664/

文章推荐： c - C 规则中的 extern 关键字

文章推荐： Jenkins JobDSL multibranchPipelineJob 更改脚本路径

api - Azure API 管理 - API 端点域与实际 API URL
我已经设置了 Azure API 管理服务，并在自定义域上配置了它。在 Azure 门户中 API 管理服务的配置部分下，我设置了以下内容: 因为这是一个客户端系统，我必须屏蔽细节，但以下是基础知识:
api - 使用 API key 获取 API(Twitter API)
我是一名习惯 React Native 的新程序员。我最近开始学习 Fetch API 及其工作原理。我的问题是，我找不到人们使用 API key 在他们的获取语句中访问信息的示例(我很难清楚地表达有
api - 插件 API 与类库 API
这里有很多关于 API 是什么的东西，但是我找不到我需要的关于插件 API 和类库 API 之间的区别。反正我不明白。在 Documenting APIs 一书中，我读到:插件 API 和类库 AP
api - 谷歌博客搜索 API 的替代 API
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
api - 在现有 API 中使用多个第三方 API 的最佳实践
我正在尝试找出设计以下场景的最佳方法。假设我已经有了一个 REST API 实现，它将从不同的供应商那里获取书籍并将它们返回给我自己的客户端。每个供应商都提供单独的 API 来向其消费者提供图书。
api - REST API 和 API key
请有人向我解释如何使用 api key 以及它有什么用处。我对此进行了很多搜索，但得到了不同且相互矛盾的答案。有人说 API key 是保密的，它从不作为通信的一部分发送，而其他人则将它发送给客户端
api - Flickr api 与 Picasa api
关闭。这个问题是opinion-based .它目前不接受答案。想改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 4年前关闭。 Improve this
api - WSO2 API Manager API 认证失败
谁能告诉我为什么 WSo2 API 管理器不进行身份验证？我已经设置了两个 WSo2 API Manager 1.8.0 实例并创建了一个 api。它作为原型(prototype) api 工作正常。
api - Fluent API 与其他 API 有何不同？
我在学习 DSL 的过程中遇到了 Fluent API。我在流利的 API 上搜索了很多……我可以得出的基本结论是，流利的 API 使用方法链来使代码流利。但我无法理解——在面向对象的语言中，我们
api - WSO2 API 管理器是否支持 API 联合？
基本上，我感兴趣的是在多个区域设置 WSO2 API 管理器；例如亚洲、美国和欧洲。一些 API 将部署在每个区域的数据中心内，而其他 API 将仅部署在特定区域内。理想情况下，我想要的是一个单一的
api - 使用 API key 保护我的 API
我正在构建自己的 API，供以下用户使用: 1) 安卓应用 2) 桌面应用我的网址之一是:http://api.chatapp.info/order_api/files/getbeers.php我的
api - 如何通过 API Key 授权谷歌分析 API
我需要向所有用户显示我的站点的分析，但使用 OAuth 它显示为登录用户配置的站点的分析。如何使用嵌入 API 实现仪表板但仅显示我的网站分析？我能想到的最好的可能性是使用 API key 而不是客
api - 提供 API 的公司是否在其 API 之前使用填充程序或代理？
我正在研究大公司如何管理其公共(public) API。我想到的是拥有成熟 API 的公司，例如 Google、Facebook、Twitter 和 Amazon。这些公司向公众公开了许多不同的 A
api - 显式 API 方法与广义的基于参数的 API 方法
在定义客户可访问的 API 时，以下是首选的行业惯例: a) 定义一组显式 API 方法，每个方法都有非常狭窄和特定的目的，例如: SetUserName SetUserAge Se
api - GAE API 资源管理器不显示 API，似乎卡在加载中
这在本地 deserver 和部署时都会发生。我成功地能够通过留言簿教程使用 API 资源管理器，但现在我已经创建了自己的项目并尝试访问我编写的第一个 API，它从未出现过。搜索栏旁边的黄色“正在加载
api - 尝试查询 API，但 api 响应为空
我正在尝试使用 http://ip-api.com/ api通过我的ip地址获取经度和纬度。当我访问 http://ip-api.com/json从我的浏览器或使用 curl，它以 json 格式返回
api - 流式 API 与 Rest API？
这里的典型示例是 Twitter 的 API。我从概念上理解 REST API 的工作原理，本质上它只是针对您的特定请求向他们的服务器查询，然后您会在其中收到响应(JSON、XML 等)，很棒。但是
api - 如何让其他 API 与您的 API 对话，而您的 API 又与 Twitter 对话？
我能想到的最好的标题，但要澄清的是，情况是这样的: 我正在开发一种类似短 url 的服务，该服务允许用户使用他们的 Twitter 帐户“登录”并发布内容。现在这项服务可以包含在 Tweetdeck
api - 平面与嵌套 API
我正在设计用于管理评论和讨论线程的 API 方案。我想有一个点 /discussions/:discussionId 当您GET 时，它会返回一组评论和一些元数据。评论也许可以单独访问 /discus
api - 后端和 API 是一样的吗？什么是后端 Web API？
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭去年。 Improve this quest

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 谷歌地图 API v3 如何获取所有形状的坐标