javascript - 如何使用bindTo()拖动标记后保存坐标

Question

如果添加新标记，我将尝试将坐标推送到我的 ptarray 变量。问题是，如果我拖动标记，我无法获取新位置或更新 ptarray 中的坐标。并且当我保存坐标时，原始坐标将被保存，而不是在拖动标记后保存。

var map;
var count = 0;
var polycolor = '#ED1B24';
var polyarray = [];
var marker;
var markers = [];
var path = new google.maps.MVCArray;
var ptarray = [];

function initialize() {
    var initial = new google.maps.LatLng(53.199246241276875, -105.76864242553711);
    var mapOptions = {
        zoom: 16,
        center: initial,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE
        },
        mapTypeControl: false
    };
    poly.setPaths(new google.maps.MVCArray([path]));
     poly.binder = new MVCArrayBinder(poly.getPath());
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    google.maps.event.addListener(map, 'click', function (e) {
        addMarker(e);
        addPolygon(e);
    });
}

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





var getMarkerlatlng = function (lat, lng) {
    return lat + '_' + lng;
}

var addMarker = function (event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();

    var markerId = getMarkerlatlng(lat, lng);
    marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable:true,
        id: markerId
    });

    var len = path.getLength();
    marker.bindTo('position', poly.binder, (len).toString());

    markers[markerId] = marker;

    ptarray.push(markerId);//here I cannot update after draggin the marker.

    google.maps.event.addListener(marker, "rightclick", function (point) {

        marker = markers[markerId];
        deletemarker(markerId);
        deletepolygon(point.latLng);
    });
}


var deletemarker = function (markerId) {
    markers[markerId].setMap(null);
    delete markers[markerId];
}

var poly = new google.maps.Polygon({
    strokeColor: polycolor,
    strokeOpacity: 1.0,
    strokeWeight: 2
});

function addPolygon(elpath) {
    path.insertAt(path.length, elpath.latLng);
    poly.setMap(map);
}

var deletemarker = function (markerId) {
    marker = markers[markerId];
    marker.setMap(null);
    delete markers[markerId];
}

var deletepolygon = function (pt) {
    i = 0;
    var thepath = poly.getPath();

    thepath.forEach(function (ltlng) {
        if (ltlng.equals(pt)) {
            path.removeAt(i);

        }
        i++;
    });
}


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

这是fiddle

提前谢谢您。

Answer 1

您正在动态更新多边形。只需在需要时从多边形获取坐标即可。

google.maps.event.addDomListener(document.getElementById('getcoords'),'click', function() {
    document.getElementById('polycoords').value = "";
    for (var i=0; i<poly.getPath().getLength(); i++) {
        document.getElementById('polycoords').value += poly.getPath().getAt(i).toUrlValue(6)+"\n";
    }
});

proof of concept fiddle

代码片段:

var map;
var count = 0;
var polycolor = '#ED1B24';
var polyarray = [];
var marker;
var markers = [];
var path = new google.maps.MVCArray;
var ptarray = [];

function initialize() {
  var initial = new google.maps.LatLng(53.199246241276875, -105.76864242553711);
  var mapOptions = {
    zoom: 16,
    center: initial,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.LARGE
    },
    mapTypeControl: false
  };
  poly.setPaths(new google.maps.MVCArray([path]));
  poly.binder = new MVCArrayBinder(poly.getPath());
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  google.maps.event.addListener(map, 'click', function(e) {
    addMarker(e);
    addPolygon(e);
  });
  google.maps.event.addDomListener(document.getElementById('getcoords'), 'click', function() {
    document.getElementById('polycoords').value = "";
    for (var i = 0; i < poly.getPath().getLength(); i++) {
      document.getElementById('polycoords').value += poly.getPath().getAt(i).toUrlValue(6) + "\n";
    }
  });
}

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





var getMarkerlatlng = function(lat, lng) {
  return lat + '_' + lng;
}

var addMarker = function(event) {
  var lat = event.latLng.lat();
  var lng = event.latLng.lng();

  var markerId = getMarkerlatlng(lat, lng);
  marker = new google.maps.Marker({
    position: event.latLng,
    map: map,
    draggable: true,
    id: markerId
  });

  var len = path.getLength();
  marker.bindTo('position', poly.binder, (len).toString());

  markers[markerId] = marker;

  ptarray.push(markerId);

  google.maps.event.addListener(marker, "rightclick", function(point) {
    //var markerId = getMarkerlatlng(point.latLng.lat(), point.latLng.lng());
    marker = markers[markerId];
    deletemarker(markerId);
    deletepolygon(point.latLng);
  });
}


var deletemarker = function(markerId) {
  markers[markerId].setMap(null);
  delete markers[markerId];
}

var poly = new google.maps.Polygon({
  strokeColor: polycolor,
  strokeOpacity: 1.0,
  strokeWeight: 2
});

function addPolygon(elpath) {
  path.insertAt(path.length, elpath.latLng);
  poly.setMap(map);
}

var deletemarker = function(markerId) {
  marker = markers[markerId];
  marker.setMap(null);
  delete markers[markerId];
}

var deletepolygon = function(pt) {
  i = 0;
  var thepath = poly.getPath();

  thepath.forEach(function(ltlng) {
    if (ltlng.equals(pt)) {
      path.removeAt(i);

    }
    i++;
  });
}


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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width: 100%; height: 400px; "></div>
<input id="getcoords" type="button" value="get coords" />
<textarea id="polycoords" type="text" cols="100" rows="20"></textarea>