如何在两个顶点之间的折线上添加点？答案

【问题标题】：How to add point on polyline somewhere between two vertexes?如何在两个顶点之间的折线上添加点？
【发布时间】：2019-05-28 14:50:05
【问题描述】：

我们的目标是在每个顶点都有一个带有自定义标记的可编辑折线。

我看到 Map API V3 不允许这样做。所以我制作了这样的可编辑折线：

let polyline = new self.google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 0.3,
    strokeWeight: 3,
    editable: false,
    path: path,
    map: self.map
});

polyline.binder = new MVCArrayBinder(polyline.getPath());

let markers = [];
for (let i = 0; i < path.length; i++) {
    let marker = this.getBasicMarker(path[i]);
    marker.bindTo('position', polyline.binder, i.toString());
    markers.push(marker);
}

getBasicMarker(position){
    return new this.google.maps.Marker({
        position: position,
        map: this.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(3.5, 3.5)
        },
        draggable: true,
        visible: false
    });
}

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

最终折线现在看起来像这样：http://sandbox.rubera.ru/img/2019-05-28_17-04-25.jpg。我可以拖动任何现有的点。拖动点时更新折线。

现在我必须在两个现有顶点之间添加新顶点。

这就是我卡住的地方。

可能有另一种解决方案如何解决任务？

【问题讨论】：

您为什么不简单地将您的折线设置为editable: true，以便可以使用 GUI 在折线上的任何位置添加任何点？
因为我需要自定义每个顶点标记。
然后呢？那有什么问题？使用 Minimal, Complete and Verifiable example 编辑您的问题，以演示该问题并解释您要实现的目标。事实上，您的问题过于宽泛且不完整。
问题已更新。
相关问题：Google Maps: Select previous Marker on Polyline

标签： google-maps-api-3 google-polyline

【解决方案1】：

如果有人面临类似的任务，请对我发布的代码进行一些修改。这帮助我最终解决了问题。

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

MVCArrayBinder.prototype.insertAt = function (key, val) {
    this.array_.insertAt(key, val);
};

google.maps.event.addListener(this.activePoly, 'click', function (e) {
    let path = $this.activePoly.getPath(),
        inserted = false;

    // find line segment
    for (let i = 0; i < path.getLength() - 1, !inserted; i++) {
        let tempPoly = new google.maps.Polyline({
            path: [path.getAt(i), path.getAt(i + 1)]
        });

        if (google.maps.geometry.poly.isLocationOnEdge(e.latLng, tempPoly, 10e-2)) {
            $this.activeRoute.binder.insertAt(i + 1, e.latLng);
            inserted = true;

            let marker = $this.getBasicMarker(e.latLng);
            marker.setVisible(true);

            // Add new marker to array
            $this.activeRoute.markers.splice(i + 1, 0, marker);

            // Have to rebind all markers
            $this.activeRoute.markers.forEach((marker, index) => {
                marker.bindTo('position', $this.activeRoute.binder, index.toString());
            });
        }
    }
});

我的 activeRoute 是一个具有以下结构的对象：

{polyline: polyline, markers: markers, binder: polyline.binder}

【讨论】：