javascript - 在 Bing map 上绘制多边形奇怪的行为 setLocations

标签 javascript bing-maps

下面是我用来在 Bing map 上绘制多边形的所有代码。我的问题是鼠标移动,我试图删除多边形中的最后一个点并将其替换为鼠标当前所在的位置。当单击发生时,会添加一个附加点来最终确定该点,并且在单击时应该只添加 1 个点,并且在鼠标移动时应该是中性点(因为它会弹出一次并推送一次)。我的问题是,由于某种原因,当我调用 Polygon.setLocations(points) 时,它会在内部向我的多边形附加一个附加点。我已经通过调试验证了在调用 setLocations 之前我的分数比调用 setLocations 之后少了 1 分。控制台输出显示在代码下方以验证这一点。似乎是库中的一个错误,任何帮助都将不胜感激,以找出如何防止这种情况,似乎只有在点数组大于长度 1 时才会发生,因为当我只有 1 个点时,它不会导致这种奇怪的情况行为。

编辑:好吧,弄清楚了,它在末尾复制第一个元素,而不是像人们期望的那样仅在内部引用自身,您必须修改倒数第二个索引,否则它会出现此行为。

    Microsoft.Maps.Events.addHandler(map, 'mousemove', PolygonDrawMouseMove);

    Microsoft.Maps.Events.addHandler(map, 'click', function (e) {
        HideInfobox();
        HideContextInfobox();
        ClearPinSelection();
        PolygonDrawClick(e);
    });

    Microsoft.Maps.Events.addHandler(map, 'rightclick', function () {
        HideInfobox();
        HideContextInfobox();
        ClearPinSelection();
    });

var Polygon = null;
var isDrawingMode = false;


function PolygonDrawClick(event) {

    if (isDrawingMode && Polygon !== null && Polygon instanceof Microsoft.Maps.Polygon)
    {
        var locations = Polygon.getLocations();
        var location = propertyMap.tryPixelToLocation(new Microsoft.Maps.Point(event.getX(), event.getY()));
        locations.push(location);
        Polygon.setLocations(locations);
    }
}

function PolygonDrawMouseMove(event)
{
    if (isDrawingMode && Polygon !== null && Polygon instanceof Microsoft.Maps.Polygon)
    {
        var points = Polygon.getLocations();

        if (points.length > 1)
        {
            console.log('start');
            console.log(points.length);
        }

        if (points.length > 0)
        {
            points.pop();
        }

        if (points.length > 1)
            console.log(points.length);

        var location = propertyMap.tryPixelToLocation(new Microsoft.Maps.Point(event.getX(), event.getY()));
        points.push(location);

        if (points.length > 1)
            console.log(points.length);

        Polygon.setLocations(points);

        if(points.length > 1)
        {
            console.log(Polygon.getLocations().length);
        }
    }
}

function DeletePolygons() {
    if (!propertyMap)
        return;

    for (var i = propertyMap.entities.getLength() - 1; i >= 0; i--) {
        var polygon = propertyMap.entities.get(i);
        if (polygon instanceof Microsoft.Maps.Polygon)
            propertyMap.entities.removeAt(i);
    }

    Polygon = null;
}

$("#compsMap").keyup(function (event) {

    //escape
    if (event.keyCode === 27 && isDrawingMode && Polygon !== null && Polygon instanceof Microsoft.Maps.Polygon)
    {
        isDrawingMode = false;
        var locations = Polygon.getLocations();
        if (locations.length > 0) locations.pop();

        if (locations.length === 0)
            DeletePolygons();
        else
            Polygon.setLocations(locations);
    }
    else if (event.keyCode === 32 && !isDrawingMode) //space
    {
        DeletePolygons();
        isDrawingMode = true;
        Polygon = new Microsoft.Maps.Polygon([new Microsoft.Maps.Location(0,0)], { fillColor: 'rgba(255,212,42,0.6)', strokeColor: '#000000', strokeThickness: 2 });
        propertyMap.entities.push(Polygon);
    }
});

[![screen shot of console output][1]][1]

最佳答案

这是设计使然。在 V8 中,多边形会自动闭合环以使其有效。简单地引用自身是不正常的,也不会起作用。

关于javascript - 在 Bing map 上绘制多边形奇怪的行为 setLocations,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44394618/

相关文章:

javascript - 修改FlipClock,使刷新页面时计时器不会重置

javascript - react JS : Get data from api and send to child component

javascript - 悬停时使 div 可见

javascript - 单击时 jQuery UI slider 会跳跃

c# - WPF Bing map 将图钉放置在不正确的位置

android - Android 必应 map

javascript - jQuery/javascript 动态 hasClass 条件

JQuery AJAX 错误无法在 xmlhttprequest 上执行发送

javascript - Bing map 获取以预定义距离间隔落在该路线上的位置的路线路径坐标

javascript - 仅在 bing map 中显示多边形区域