在 Bing 地图奇怪行为 setLocations 上绘制多边形
Drawing Polygon On Bing Map Odd Behaviour setLocations
下面是我用来在 Bing 地图上绘制多边形的所有代码。我的问题是鼠标移动我正在尝试删除多边形中的最后一个点并将其替换为鼠标当前所在的位置。当发生点击时,会添加一个额外的点来完成该点,点击时它应该只添加 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 中自动闭合它们的环以帮助它们有效。简单引用自身是不正常的,也不行。
下面是我用来在 Bing 地图上绘制多边形的所有代码。我的问题是鼠标移动我正在尝试删除多边形中的最后一个点并将其替换为鼠标当前所在的位置。当发生点击时,会添加一个额外的点来完成该点,点击时它应该只添加 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 中自动闭合它们的环以帮助它们有效。简单引用自身是不正常的,也不行。