Question

当单击“ 创建新聚度” 按钮时, 如何在数组中存储最后一个对象, 并创建一个新的清洁对象以在地图上绘制新的分离聚度线。我想保留旧的聚线的功能。现在无法清理该对象。简化的示例显示了铃声。

HTML :

<button onclick="create()">Create New Poly</button>
<div id="map" style="width: 500px; height: 400px;"></div>

联署材料:

var map;
var listener;

var polys = [],
    poly = {};

create = function() {
    poly = new Poly();

    if ( !! listener) google.maps.event.removeListener(listener);
    listener = google.maps.event.addListener(map,  click , function(e) {
        poly.addPoint(e.latLng);
    });
}

function Poly() {
    this.markers = [];
    this.setMap(map);
    polys.push(this);
}
Poly.prototype = new google.maps.Polyline();

Poly.prototype.addPoint = function(p) {
    var m = poly.createMarker(p);
    poly.markers.push(m);
    poly.getPath().push(p);
}

Poly.prototype.createMarker = function(p) {
    var marker = new google.maps.Marker({
        position: p
    });
    marker.setMap(this.getMap());
    return marker;
}

$(function() {
    map = new google.maps.Map(document.getElementById( map ), {
        center: new google.maps.LatLng(48.864715, 10.546875),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

说明:"http://jsfiddle.net/3Hzsg/" rel="nofollow" >JSFIDDLE

Answer 1

即使做了本·戴维斯建议的"http://jsfiddle.net/LxGmR/" rel="notfollow noreferrer" >http://jsfiddle.net/LxGmR/ ,它仍然存在问题。

我认为这是因为所有共享相同原型的普洛伊对象 : poly.prototype = new google.maps.polyline (); 。我认为修正是,每个新的 Ploy 对象都需要自己的原型 google.maps.polyline 实例。

测试后,我发现:http://jsfidle.net/uhZFE/

然后,我在没有包装功能的情况下研究了如何做到这一点,我使用了SO答复也有帮助),并制作了 http://jsfidle.net/Ygwrid/ < a>。

var map;
var listener;

var polys = [];

create = function () {
  var poly = new Poly();

  if ( !! listener) google.maps.event.removeListener(listener);
  listener = google.maps.event.addListener(map,  click , function (e) {
    poly.addPoint(e.latLng);
  });
  polys.push(poly);
}

function Poly() {
  google.maps.Polyline.call(this);
  this.markers = [];
  this.setMap(map);
}
Poly.prototype = Object.create(google.maps.Polyline.prototype);

Poly.prototype.addPoint = function (p) {
  var m = this.createMarker(p);
  this.markers.push(m);
  this.getPath().push(p);
}

Poly.prototype.createMarker = function (p) {
  var marker = new google.maps.Marker({
    position: p
  });
  marker.setMap(this.getMap());
  return marker;
}

$(function () {
  map = new google.maps.Map(document.getElementById( map ), {
    center: new google.maps.LatLng(48.864715, 10.546875),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
});

Answer 2

我认为您的问题与变量范围有关。您应该在创建() 函数中声明聚。另外, 我认为将创建对象推入创建() 函数中的阵列, 以坚持将关注分隔开来, 会更有意义。

另外,在您的 addPoint () 函数中,当您应该使用“ 此” 时,您指的是全局多功能变量。

最新代码 :

var map;
var listener;

var polys = [];

create = function() {
    var poly = new Poly();

    if ( !! listener) google.maps.event.removeListener(listener);
    listener = google.maps.event.addListener(map,  click , function(e) {
        poly.addPoint(e.latLng);
    });
    polys.push(poly);
}

function Poly() {
    this.markers = [];
    this.setMap(map);
}
Poly.prototype = new google.maps.Polyline();

Poly.prototype.addPoint = function(p) {
    var m = this.createMarker(p);
    this.markers.push(m);
    this.getPath().push(p);
}

Poly.prototype.createMarker = function(p) {
    var marker = new google.maps.Marker({
        position: p
    });
    marker.setMap(this.getMap());
    return marker;
}

$(function() {
    map = new google.maps.Map(document.getElementById( map ), {
        center: new google.maps.LatLng(48.864715, 10.546875),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

友情链接