Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 避免顶点拖动贴图api v3_Javascript_Google Maps_Google Maps Api 3_Polyline - Fatal编程技术网

Javascript 避免顶点拖动贴图api v3

Javascript 避免顶点拖动贴图api v3,javascript,google-maps,google-maps-api-3,polyline,Javascript,Google Maps,Google Maps Api 3,Polyline,很简单。我希望避免拖动第一个和最后一个顶点。我尝试过使用dragstart事件,但显然polyline不听那个 我设法用set_做了点什么。我存储了最后一个位置,当调用set_at时,我检查该顶点的索引,然后将该顶点的latLng设置为旧的。这只能使用再次触发事件的setAt函数 所以a创建了一个ignoreNextEvent标志,所以它不会进行无限循环 问题是,maps api多次使用setAt函数os,解决方案虽然有效,但并不完美,每次与多段线交互时,我都需要担心IgnoreNext事件 我

很简单。我希望避免拖动第一个和最后一个顶点。我尝试过使用dragstart事件,但显然polyline不听那个

我设法用set_做了点什么。我存储了最后一个位置,当调用set_at时,我检查该顶点的索引,然后将该顶点的latLng设置为旧的。这只能使用再次触发事件的setAt函数

所以a创建了一个ignoreNextEvent标志,所以它不会进行无限循环

问题是,maps api多次使用setAt函数os,解决方案虽然有效,但并不完美,每次与多段线交互时,我都需要担心IgnoreNext事件

我正试图找到一种方法来实现这一点,有人能帮忙吗

工作守则:

google.maps.event.addListener(cable.getPath(), 'set_at', function(e){
    if(!ignoreNextEvent){
        if(e == 0 || e == cable.getPath().length-1){
            var point = new google.maps.LatLng(cable.Cable.vertex[e].latitude, cable.Cable.vertex[e].longitude);
            ignoreNextEvent = true;
            cable.getPath().setAt(e,point);
        }else{
            if(cable.Cable.idx != 0){ saveCable(index, cable.Cable.destination_idx); }  
        }
    }else{
        ignoreNextEvent = false;
    }
});

创建多段线,将可拖动标记绑定到要拖动的顶点,将不可拖动的标记绑定到不想拖动的顶点


var gmarkers = [];
var map;

  function addLatLng(event) {
    var path = poly.getPath();
    path.push(event.latLng);
    var len = path.getLength();
    var marker = new google.maps.Marker({
      position: event.latLng,
      title: '#' + len,
      map: map,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7,7),
        anchor: new google.maps.Point(4,4)
      },
      draggable : true
    });
    gmarkers.push(marker);
    marker.bindTo('position', poly.binder, (len-1).toString());
  }

function initialize() {
  var polyOptions = {
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3, map: map
    };
  poly = new google.maps.Polyline(polyOptions);
  var bounds = new google.maps.LatLngBounds();
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(10.9386, -84.888),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  poly.binder = new MVCArrayBinder(poly.getPath());
  for(var i = 0; i < locations.length; i++) {
    var evt = {};
    evt.latLng = new google.maps.LatLng(locations[i][0], locations[i][1]);
    bounds.extend(evt.latLng);
    addLatLng(evt);
  }
  gmarkers[0].setDraggable(false);
  gmarkers[gmarkers.length-1].setDraggable(false);


  poly.setMap(map);
  map.fitBounds(bounds);
} 
google.maps.event.addDomListener(window, "load", initialize);

  /*
   * Use bindTo to allow dynamic drag of markers to refresh poly.
   */

  function MVCArrayBinder(mvcArray){
    this.array_ = mvcArray;
  }
  MVCArrayBinder.prototype = new google.maps.MVCObject();
  MVCArrayBinder.prototype.get = function(key) {
    if (!isNaN(parseInt(key))){
      return this.array_.getAt(parseInt(key));
    } else {
      this.array_.get(key);
    }
  }
  MVCArrayBinder.prototype.set = function(key, val) {
    if (!isNaN(parseInt(key))){
      this.array_.setAt(parseInt(key), val);
    } else {
      this.array_.set(key, val);
    }
  }