Google.maps.JavaScript api;同时移动多个多边形的顶点
Google.maps.api, JavaScript; Moving vertex of many polygons at the same time
我有一堆多边形(google.maps.Polygon
),我已经导入到一个地图。它们边缘相连,共享顶点,所以中间没有"空白区域"(你可以想象国家边界或邮政编码区域),所以它有点像网格。
现在,我希望我的用户能够编辑这个网格:当一个多边形的顶点从位置(x1, y1)移动到(x2, y2)时,同一位置(x1, y1)上的所有其他顶点(其他多边形的顶点)都应该移动到新位置(x2, y2)。
你知道我该怎么做吗?
这是我尝试过的:我可以让多边形editable: true
,这将允许用户拖动顶点,但不是所有的多边形顶点都会跟随。
我试图为多边形添加一个"set_at"
监听器,一旦顶点被移动,循环抛出其他多边形并检查它们是否具有与开始相同坐标的顶点,如果是,将该坐标移动到新位置。问题是我不知道如何得到移动坐标的起始坐标,只知道得到结束坐标。
有没有比使用多边形(比如网格)更好的方法来解决这个问题?
非常感谢你的帮助!很难移动所有其他坐标。为什么不做一个可编辑的多边形呢?让用户自己在谷歌地图上添加/编辑多边形。我正在分享我的代码,其中我正在创建一堆多边形,用户也可以编辑它
<pre>
var COLORS = [["red", "#ff0000"], ["orange", "#ff8800"], ["green","#008000"], ["blue", "#000080"], ["purple", "#800080"]];
var options = {};
var lineCounter_ = 0;
var shapeCounter_ = 0;
var markerCounter_ = 0;
var colorIndex_ = 0;
var featureTable_;
var map;
//Active selective controller
function select(buttonId)
{
document.getElementById("hand_b").className="unselected";
document.getElementById("shape_b").className="unselected";
//document.getElementById("line_b").className="unselected";
//document.getElementById("placemark_b").className="unselected";
document.getElementById(buttonId).className="selected";
}
//Active tab after editing completion
function stopEditing()
{
select("hand_b");
}
function getColor(named)
{
return COLORS[(colorIndex_++) % COLORS.length][named ? 0 : 1];
}
function getIcon(color)
{
var icon = new GIcon();
icon.image = "http://google.com/mapfiles/ms/micons/" + color + ".png";
icon.iconSize = new GSize(32, 32);
icon.iconAnchor = new GPoint(15, 32);
return icon;
}
function startShape()
{
select("shape_b");
var color = getColor(false);
var polygon = new GPolygon([], color, 2, 0.7, color, 0.2);
startDrawing(polygon, "Shape " + (++shapeCounter_), function()
{
var cell = this;
var area = polygon.getArea();
cell.innerHTML = (Math.round(area / 10000) / 100) + "km<sup>2</sup>";
}, color);
}
function addFeatureEntry(name, color)
{
currentRow_ = document.createElement("tr");
var colorCell = document.createElement("td");
currentRow_.appendChild(colorCell);
colorCell.style.backgroundColor = color;
colorCell.style.width = "1em";
var nameCell = document.createElement("td");
currentRow_.appendChild(nameCell);
nameCell.innerHTML = name;
var descriptionCell = document.createElement("td");
currentRow_.appendChild(descriptionCell);
featureTable_.appendChild(currentRow_);
return {desc: descriptionCell, color: colorCell};
}
function startDrawing(poly, name, onUpdate, color)
{
map.addOverlay(poly);
poly.enableDrawing(options);
poly.enableEditing({onEvent: "mouseover"});
poly.disableEditing({onEvent: "mouseout"});
GEvent.addListener(poly, "endline", function()
{
select("hand_b");
//SANI: getting all vertix of polygon
var str = '{"zones":[';
for (var i = 0, I = poly.getVertexCount(); i < I; ++i)
{
var xy = poly.getVertex(i);
str += '{"lat":"'+xy.lat() + '", "long":"' + xy.lng() + '"}';
if(i != Number(I-1))
str += ',';
}
str += ']}';
//SANI: getting polygon name
var n = prompt("Enter polygon name:", "");
frmFeilds = "latlng="+str+"&name="+n;
//SANI: storing lat,long and name into database
$(document).ready(
function()
{
$.ajax({
url: 'save_polygon.php',
type:'POST',
data:'action=yes&'+frmFeilds,
success: function(sani)
{
featureTable_.innerHTML = sani;
}
});
}
);
//select("hand_b");
// var cells = addFeatureEntry(name, color);
GEvent.bind(poly, "lineupdated", cells.desc, onUpdate);
GEvent.addListener(poly, "click", function(latlng, index)
{
if (typeof index == "number")
{
poly.deleteVertex(index);
} else {
var newColor = getColor(false);
cells.color.style.backgroundColor = newColor
poly.setStrokeStyle({color: newColor, weight: 4});
}
});
});
}
function initialize()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(25.18622, 55.23866), 11);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.clearOverlays();
featureTable_ = document.getElementById("featuretbody");
select("hand_b");
/* S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@NI */
<?php
$zoneQry = mysql_query("SELECT * FROM tbl_zones where zon_status = '1'");
if(mysql_num_rows($zoneQry) > 0)
{
while($zoneRec = mysql_fetch_assoc($zoneQry))
{
$json = (string)$zoneRec['zon_vertix'];
$obj = json_decode($json, true);
?>
var polygon<?php echo $zoneRec['zon_id']; ?> = new GPolygon([
<?php
foreach($obj['zones'] as $zones)
{
?>
new GLatLng(<?php echo $zones['lat']; ?>, <?php echo $zones['long']; ?>),
<?php } ?>
], "#f06ca8", 2, 1, "#89cff1", 0.5);
drawShapBySani(polygon<?php echo $zoneRec['zon_id']; ?>);
updatezones(<?php echo $zoneRec['zon_id']; ?>, polygon<?php echo $zoneRec['zon_id']; ?>);
<?php
}
}
?>
/* S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@NI */
}
}
/* S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ SANI: Update all Zones @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@NI */
function updatezones(zonid, zoneObj)
{
//Update zones on click
$("#updatezone").click(function() {
//alert(zonid+', '+zoneObj);
var str = '{"zones":[';
for(var i = 0, I = zoneObj.getVertexCount(); i < I; ++i)
{
var xy = zoneObj.getVertex(i);
str += '{"lat":"'+xy.lat() + '", "long":"' + xy.lng() + '"}';
if(i != Number(I-1))
str += ',';
}
str += ']}';
//SANI: getting polygon name
frmFeilds = "latlng="+str+"&id="+zonid;
//SANI: storing lat,long and name into database
$(document).ready(
function()
{
$.ajax({
url: 'save_polygon.php',
type:'POST',
data:'action=yes&'+frmFeilds,
success: function(sani)
{
featureTable_.innerHTML = sani;
}
});
}
);
});
}
/* S@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ SANI: Draw Editable Shap @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@NI */
function drawShapBySani(polygon)
{
map.addOverlay(polygon);
startDrawing(polygon, 'sani', function() {
var cell = this;
var area = polygon.getArea();
cell.innerHTML = (Math.round(area / 10000) / 100) + "km<sup>2</sup>";
}, '#ff0000');
select("hand_b");
polygon.disableEditing();
}
</pre>
希望它对你有用。
谢谢
相关文章:
- SVG/JavaScript:尝试选择和更改多边形点
- 如何获取谷歌地图多边形的当前fillColor
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 使用Google Maps API驱动时间多边形
- Matlab点在多边形中
- 如何使所有绘制的(矩形、圆形、直线、多边形)都可拖动?纯JS
- 如何在fabric js中向多边形添加图像
- 使用css跨浏览器动态剪切多边形
- fabric js多边形集合坐标
- 从传单数据到GeoJSON的多边形
- 我们可以为Cesium中使用CZML绘制的多边形设置outlineWidth属性吗
- 如何在pixi.js多边形上放置纹理
- 在谷歌地图V3上选择多边形
- 如何在鼠标单击时更改KML多边形的颜色
- 谷歌地图多边形减慢浏览器速度
- 精灵从pixi到p2的边界多边形
- d3js/没有固定坐标的多边形
- 如何使用谷歌地图在开放层中取消投影和重新投影多边形的顶点
- Google.maps.JavaScript api;同时移动多个多边形的顶点
- 谷歌地图Api V3:如何将标记绑定到多边形的顶点