javascript - Ui-gmap-google-map में चयनित बहुभुज को हटाने में सक्षम नहीं




angularjs google-maps angular-ui-router angular-google-maps (3)

Ui -google-map प्लगइन के ड्राइंग मैनेजर डॉक्टर द्वारा , आप 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); लिए निर्धारित करके हटा सकते हैं selectedShape.setMap(null); और आकार को सही आकार में shape.setEditable(true); करने के लिए इसे सेट करके अपडेट करें shape.setEditable(true);

और अंत में इन क्लिक ईवेंट को संभव बनाने के लिए आपको सभी आकार के लिए क्लिक करने योग्य विकल्पों को सही करने की आवश्यकता है पीएस: उस पर काम करने से पहले तैयार नक्शा तैयार करने के लिए IsReady सेवा का उपयोग करें

काम कर रहे प्लंकर: https://embed.plnkr.co/qfjkT2lOu2vkATisGbw7/

अद्यतन करें:

लेकिन संपादन या ड्रॉ के बाद कई बहुभुजों के सभी समन्वय कैसे प्राप्त करें।

आपके पास पहले से ही यह आपकी स्क्रिप्ट में है, polygonecomplete ($ 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);

}

अब आपके पास सभी आकृतियाँ सरणी हैं, और अंत में आप इसे पा सकते हैं तो प्रत्येक निर्देशांक प्राप्त कर सकते हैं और अपने डीबी में बचा सकते हैं।

मैंने प्लंकर को अद्यतन किया और कुछ डीबग लॉग आपको दिखाए।

मैं Google Draw प्रबंधक का उपयोग करके कई बहुभुज आकर्षित करने में सक्षम हूं। अब मैं बहुभुज से विशिष्ट बहुभुज का चयन नहीं कर पा रहा हूं और इसे हटाकर संपादित कर सकता हूं। संपादन या हटाने के बाद भी नई सरणी नहीं मिल पाई।

मेरा डेमो। जेएस कोड निम्नानुसार है:

$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);
    }

और मेरा HTML कोड इस प्रकार है:

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

संदर्भ के लिए आप बहुभुज छवि पा सकते हैं:

अब मैं निम्नलिखित छवि से बहुभुज में से एक का चयन करना चाहता हूं और इसे हटाना या अपडेट करना चाहता हूं।

कुछ मदद वास्तव में सराहनीय हो जाएगा



हम यूआरएल की समाप्ति के साथ एडब्ल्यूएस क्लाउडफ्रंट का उपयोग कर समाप्त हो गए। वीडियो लोड हो जाएगा, लेकिन जब तक उपयोगकर्ता सही क्लिक करता है और चुनता है तो वीडियो यूआरएल के रूप में शुरू में उन्हें समाप्त हो गया है। क्लाउडफ्रंट मूल पहुंच पहचान के लिए एक खोज करें।

वीडियो यूआरएल का निर्माण करने के लिए एक प्रमुख जोड़ी की आवश्यकता होती है जिसे एडब्ल्यूएस सीएलआई में बनाया जा सकता है। एफवाईआई यह मेरा कोड नहीं है लेकिन यह बहुत अच्छा काम करता है!

$resource = 'http://cdn.yourwebsite.com/videos/yourvideourl.mp4';
$timeout = 4;

//This comes from key pair you generated for cloudfront
$keyPairId = "AKAJSDHFKASWERASDF";

$expires = time() + $timeout; //Time out in seconds
$json = '{"Statement":[{"Resource":"'.$resource.'","Condition" {"DateLessThan":{"AWS:EpochTime":'.$expires.'}}}]}';     

//Read Cloudfront Private Key Pair
$fp=fopen("/absolute/path/to/your/cloudfront_privatekey.pem","r"); 
$priv_key=fread($fp,8192); 
fclose($fp); 

//Create the private key
$key = openssl_get_privatekey($priv_key);
if(!$key)
{
    echo "<p>Failed to load private key!</p>";
    return;
}

//Sign the policy with the private key
if(!openssl_sign($json, $signed_policy, $key, OPENSSL_ALGO_SHA1))
{
    echo '<p>Failed to sign policy: '.openssl_error_string().'</p>';
    return;
}

//Create url safe signed policy
$base64_signed_policy = base64_encode($signed_policy);
$signature = str_replace(array('+','=','/'), array('-','_','~'), $base64_signed_policy);

//Construct the URL
$url = $resource.'?Expires='.$expires.'&Signature='.$signature.'&Key-Pair-Id='.$keyPairId;

return '<div class="videowrapper" ><video autoplay controls style="width:100%!important;height:auto!important;"><source src="'.$url.'" type="video/mp4">Your browser does not support the video tag.</video></div>';




javascript angularjs google-maps angular-ui-router angular-google-maps