Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API v3如何获取所有形状的坐标

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

javascript google-maps google-maps-api-3

Javascript 谷歌地图API v3如何获取所有形状的坐标,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我有一个谷歌脚本，可以创建形状和删除形状，但对保存形状没有太多的帮助 我查了一下互联网，知道我可以通过OverlyComplete中的getpaths（）访问路径坐标，还可以将坐标推送到一个收集所有形状的数组中。但是，如果用户删除一个形状会怎么样？或者更新它 我的问题是，我不知道如何识别已删除的形状，以便可以相应地更新形状集合数组 第二个问题是，我不知道如何识别用户是否更新了形状以及哪个形状得到了更新。因此无法更新形状集合数组 我需要一个解决方案，当点击保存按钮。我可以得到地图上所有形状的坐标。

我有一个谷歌脚本，可以创建形状和删除形状，但对保存形状没有太多的帮助

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

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

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

我需要一个解决方案，当点击保存按钮。我可以得到地图上所有形状的坐标。因此，我不必关心更新或删除的内容。我目前的代码如下：

 <!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>


#地图，html，正文{
身高：100%；
保证金：0；
填充：0；
}
#删除按钮，#保存按钮{
边缘顶部：5px；
位置：绝对位置；
z指数：999；
右：6%；
最高：3%；
}
#保存按钮{
右：1%；
}
删除选定形状
拯救一切
风险提取经理；
变量选择形状；
var shapeCollection=[]；
函数save（）{
console.log（shapeCollection）；
}
函数{
如果（selectedShape）{
selectedShape.setEditable（false）；
selectedShape=null；
}
}
功能选择（形状）{
选举（）；
selectedShape=形状；
shape.setEditable（true）；
}
函数deleteSelectedShape（）{
如果（selectedShape）{
selectedShape.setMap（空）；
}
}
函数初始化（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（22.344114.048），
mapTypeId:google.maps.mapTypeId.ROADMAP，
});
var多选项={
冲程重量：3，
填充不透明度：0.2，
是的，
德拉格布尔：是的
};
//创建附着到地图的图形管理器，允许用户绘制
//标记、线条和形状。
drawingManager=新建google.maps.drawing.drawingManager({
drawingControl：对，
drawingControlOptions：{
drawingModes:[google.maps.drawing.OverlayType.POLYGON]
},
drawingMode:google.maps.drawing.OverlyType.POLYGON，
多基因选择：多基因选择，
地图：地图
});
google.maps.event.addListener（drawingManager，'OverlyComplete'，函数（e）{
drawingManager.setDrawingMode（空）；
//添加一个事件侦听器，当用户
//鼠标落在它上面。
var newShape=e.overlay；
newShape.type=e.type；
google.maps.event.addListener（newShape，'click'，function（）{
选举（新闻形态）；
});
选举（新闻形态）；
});
//polygonPoints将是数组，数组的索引将是顺序
//当图形模式更改或
//点击地图。
google.maps.event.addListener（drawingManager，'drawingmode_changed'，clearSelection）；
google.maps.event.addListener（映射，'click'，clearSelection）；
google.maps.event.addDomListener（document.getElementById（'delete-button'），'click'，deleteSelectedShape）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
为形状创建唯一属性（ID），并将形状存储在对象中（使用ID作为键）

要删除形状时，可以使用
delete
从集合中删除形状（基于形状的ID）

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

演示：

函数初始化（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（22.344114.048），
mapTypeId:google.maps.mapTypeId.ROADMAP，
诺克利尔：是的
});
map.controls[google.maps.ControlPosition.RIGHT\u-BOTTOM]
.push（document.getElementById（'save-button'）；
map.controls[google.maps.ControlPosition.RIGHT\u-BOTTOM]
.push（document.getElementById（'delete-button'）；
var多选项={
冲程重量：3，
填充不透明度：0.2
};
变量形状={
集合：{}，
selectedShape:null，
加：职能（e）{
var shape=e.overlay，
那=这个；
shape.type=e.type；
shape.id=new Date（）.getTime（）+“”“+”Math.floor（Math.random（）*1000）；
this.collection[shape.id]=shape；
这是一种选择（形状）；
google.maps.event.addListener（形状，'click'，函数（）{
（本次）选举；
});
},
设置选择：函数（形状）{
if（this.selectedShape！==shape）{
这是一次选举（）；
this.selectedShape=shape；
shape.set（'draggable'，true）；
shape.set（'editable'，true）；
}
},
deleteSelected:函数（）{
如果（此.selectedShape）{
var shape=this.selectedShape；
这是一次选举（）；
setMap（空）；
删除此.collection[shape.id]；
}
},
选择：函数（）{
如果（此.selectedShape）{
this.selectedShape.set（'draggable'，false）；