javascript - غير قادر على حذف المضلع المحدد في أوي-غماب-غوغل-ماب




angularjs google-maps (2)

من خلال المستند مدير الرسم المساعد أوي-غوغل-ماب، يمكنك الحصول على الكائن google.maps.drawing.DrawingManager بواسطة سمات التحكم (وضع هناك كائن)

<ui-gmap-drawing-manager control="drawingManagerControl" options="drawingManagerOptions"></ui-gmap-drawing-manager>

و

$scope.drawingManagerControl = {};
//Now get the drawingManager object
var drawingManager = $scope.drawingManagerControl.getDrawingManager();

وجود هذا الكائن هو العمل الرئيسي. الآن يمكنك أن تبحث على كل ما تحتاجه. لحالتك كنت في حاجة إلى أحداث أوفيرلايكومبليت ، وسوف الاستماع في كل مرة كنت قد رسمت شكل (=> المضلع، دائرة، متعدد الخطوط)

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
  var newShape = e.overlay;
});

newShape هو الشكل الجديد المرسوم، المضلع في قضيتك، حتى تتمكن من استخدامه مثل كائن مضلع ويمكن استخدام كل ما تحتاجه في هذا المرجع.

الآن أريد تحديد واحد من المضلع من الصورة التالية وتريد حذف أو تحديثه.

لذلك، سنقوم بتمييز المضلع المحدد، من خلال تعيينه في متغير عام: على سبيل المثال var selectedShape;

والآن، إضافة مستمع الحدث انقر لهذا المضلع رسمها وتحديثه على شكل المحدد، والآن لحذف أو تحديث، يمكنك استخدام متغير شيبدشيب.

var selectedShape;
... ...
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    var newShape = e.overlay;
    google.maps.event.addListener(newShape, 'click', function() {
        selectedShape = newShape;
    });
}); 

وأخيرا يمكنك حذف الشكل المحدد عن طريق تعيين خريطته إلى نول selectedShape.setMap(null); وتحديث الشكل من خلال shape.setEditable(true); للتحرير إلى shape.setEditable(true); الصحيح. shape.setEditable(true);

وأخيرا لجعل هذه النقرة الحدث ممكن تحتاج إلى إضافة خيارات قابلة للنقر إلى صحيح لجميع الشكل. ملاحظة: استخدام خدمة إسريدي لديك خريطة جاهزة قبل العمل على ذلك

العمل الغطاس: https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/

تحديث:

ولكن كيفية الحصول على جميع تنسق المضلع متعددة بعد تحرير أو رسم.

لديك بالفعل هذا في البرنامج النصي، في بوليجونيكومبليت ($ scope.eventHandler). الآن يمكنك إضافته في أوفيرلايكومبليت الأحداث المستمع، ولكل مرة قمت بتحديث الشكل (انظر رمز رفع الصوت عاليا)

ولكن التحدي هو كيفية تحديد المضلع الذي تم تحريره على الخريطة وكيفية تحديث المضلع المحدد من صفيفتي

يمكنك دفع في صفيف لكل شكل تم إنشاؤه ويمكن إدارته:

 ...
 var allShapes = []; //the array contains all shape, to save in end
 ....
//get path coords: I use your code there
function getShapeCoords(shape) {
  var path = shape.getPath();
  var coords = [];
  for (var i = 0; i < path.length; i++) {
    coords.push({
      latitude: path.getAt(i).lat(),
      longitude: path.getAt(i).lng()
    });
  }
  return coords;
}
....
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
    var newShape = e.overlay;
    google.maps.event.addListener(newShape, 'click', function() {
        selectedShape = newShape;
    });
    ...
    // get coordinate of the polygon
    var shapeCoords = getShapeCoords(newShape);
    // pushing this shape to allShapes array
    allShapes.push(newShape);
}); 

في وظيفة الحذف يمكنك حذف معرف بواسطة فهرس المحدد

//delete selected shape
function deleteSelectedShape() {
  if (!selectedShape) {
    alert("There are no shape selected");
    return;
  }
  var index = allShapes.indexOf(selectedShape);
  allShapes.splice(index, 1);
  selectedShape.setMap(null);

}

الآن لديك مجموعة ألشابيس، وفي النهاية يمكنك حلقة ثم الحصول على كل الإحداثيات وحفظ في ديسيبل الخاص بك.

أنا تحديث الغطاس وأضاف بعض سجل التصحيح لا تظهر لك.

أنا قادرة على رسم مضلع متعددة باستخدام جوجل رسم مدير. الآن لا أستطيع تحديد مضلع محدد من مضلع متعدد وحذفه وتعديله. أيضا غير قادر على الحصول على مجموعة جديدة بعد تحرير أو حذف.

بلدي رمز demo.js هو كما يلي:

$scope.map = {
        center: { latitude: 19.997454, longitude: 73.789803 },
        zoom: 10,
        //mapTypeId: google.maps.MapTypeId.ROADMAP,
        //radius: 15000,
        stroke: {
            color: '#08B21F',
            weight: 2,
            opacity: 1
        },
        fill: {
            color: '#08B21F',
            opacity: 0.5
        },
        geodesic: true, // optional: defaults to false
        draggable: false, // optional: defaults to false
        clickable: false, // optional: defaults to true
        editable: false, // optional: defaults to false
        visible: true, // optional: defaults to true
        control: {},
        refresh: "refreshMap",
        options: { scrollwheel: true },
        Polygon: {
            visible: true,
            editable: true,
            draggable: true,
            geodesic: true,
            stroke: {
                weight: 3,
                color: 'red'
            }
        },
   source: {
            id: 'source',
            coords: {
                'latitude': 19.9989551,
                'longitude': 73.75095599999997
            },
            options: {
                draggable: false,
                icon: 'assets/img/person.png'
            }
        },
        isDrawingModeEnabled: true
    };

   $scope.drawingManagerOptions = {
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              //google.maps.drawing.OverlayType.CIRCLE,
              google.maps.drawing.OverlayType.POLYGON,
            ]
        },
        circleOptions: {
            fillColor: '#BCDCF9',
            fillOpacity:0.5,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        },
        polygonOptions: {
            fillColor: '#BCDCF9',
            strokeColor: '#57ACF9',
            fillOpacity: 0.5,
            strokeWeight: 2,
            clickable: false,
            editable: true,
            zIndex: 1
        }
    };
    var coords = [];
    var polygon;
    $scope.eventHandler = {
        polygoncomplete: function (drawingManager, eventName, scope, args) {
            polygon = args[0];
            var path = polygon.getPath();
            for (var i = 0 ; i < path.length ; i++) {
                coords.push({
                    latitude: path.getAt(i).lat(),
                    longitude: path.getAt(i).lng()
                });
            }
    },
    };

    $scope.removeShape = function () {
        google.maps.event.clearListeners(polygon, 'click');
        google.maps.event.clearListeners(polygon, 'drag_handler_name');
        polygon.setMap(null);
    }

وشفرة هتمل هي كما يلي:

<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control">
                <ui-gmap-marker coords="map.source.coords"
                                options="map.source.options"
                                idkey="map.source.id">
                </ui-gmap-marker>

                <ui-gmap-drawing-manager options="drawingManagerOptions" control="drawingManagerControl" events="eventHandler"></ui-gmap-drawing-manager>
            </ui-gmap-google-map>

يمكنك العثور على صورة المضلع كمرجع:

الآن أريد تحديد واحد من المضلع من الصورة التالية وتريد حذف أو تحديثه.

بعض المساعدة ستكون حقا تقدر.






angular-google-maps