编辑和拖动
编辑时间:2017-03-03

可由用户编辑和拖动的形状

山西福彩快乐十分 www.x78jx.cn 将形状设置为可编辑会给形状添加手柄,用户可以利用手柄直接在地图上对形状进行位置调整、重新塑形和尺寸

调整。您还可以将形状设置为可拖动,以便用户将其移至地图上的其他地点。用户对对象做出的更改无法跨会话

存留。如果您想保存用户的编辑,必须自行采集和存储信息。

将形状设置为可编辑

可通过在形状的选项中将 editable 设置为 true,将任何形状(多段线、多边形、圆和矩形)设置为可由用

户编辑。


以下代码将设置圆为可编辑

var pathLatLng = [{lat: 33, lng: 104}, {lat: 28, lng: 108}]
var center = new google.maps.LatLng(30.54024807, 104.06966686);
var testCircle = new google.maps.Circle({
      
radius: 1000000,//半径
   
center: center,//中心点
   
editable:true, //设定可编辑
   
strokeColor: '#FF0000',//描边颜色
   
strokeOpacity: 1.0,//描边透明度
   
strokeWeight: 2, //描边线的像素
   
fillColor: '#FF0000',//填充颜色
   
fillOpacity: 0.35//填充透明度
});
testCircle.setMap(map);


运行结果如下图所示:


QQ截图20170302094824.png

将形状设置为可拖动

默认情况下,在地图上绘制的形状位置固定。如需允许用户将形状拖动到地图上的其他位置,请在形状的选项中

draggable 设置为 true。

代码示例:


var pathLatLng = [{lat: 33, lng: 104}, {lat: 28, lng: 108},{lat: 24, lng: 118}]
var testPolygon = new google.maps.Polygon({
      
map:map,
      
path:pathLatLng,
      
draggable:true,
      
geodesic: true,//测地多边形或多段线。
   
strokeColor: '#FF0000',//描边颜色
   
strokeOpacity: 1.0,//描边透明度
   
strokeWeight: 2, //描边线的像素
   
fillColor: '#FF0000',//填充颜色
   
fillOpacity: 0.35//填充透明度
});

 


为多边形或多段线启用拖动时,您还应考虑通过将多边形或多段线的 geodesic 属性设置为 true,将其变为

测地多边形或多段线。

测地多边形可在移动时保持其真正地理形状,导致多边形在墨卡托投影法下向北或向南移动时出现失真。非测地

多边形将在屏幕上始终保持其初始外观。

在测地多段线中,多段线的线段绘制为地球表面两点间的最短路径,并假定地球为球面,相比之下,墨卡托投影

法下则是绘制为直线。


以下地图显示了两个尺寸和样式大致相同的三角形。红色三角形的 geodesic 属性设置为 true。请注意在其

向北移动时形状的变化。

QQ截图20170302100007.png

侦听编辑事件

编辑形状时,会在编辑完成时触发事件。下面列出了这些事件。


形状

事件

 radius_changed
 
center_changed

多边形

 insert_at
 
remove_at
 
set_at

必须在多边形的路径上设置侦听器。如果多边形有多个路径,必须在每个路径上设置侦听器。

多段线

 insert_at
 
remove_at
 
set_at

必须在多段线的路径上设置侦听器。

矩形

bounds_changed



一些有用的代码段:

 

google.maps.event.addListener(circle, 'radius_changed', function() {
   
console.log(circle.getRadius());
});

google.maps.
event.addListener(rectangle, 'bounds_changed', function() {
   
console.log('Bounds changed.');
});

 

对于线段和多边形来说,请在路径上监听事件:


var pathLatLng = [{lat: 33, lng: 104}, {lat: 28, lng: 108},{lat: 24, lng: 118}];

var testPolygon = new google.maps.Polygon({
      
map:map,
      
path:pathLatLng,
      
draggable:true,
      
editable:true,
      
geodesic: true,//测地多边形或多段线。
    
strokeColor: '#FF0000',//描边颜色
   
strokeOpacity: 1.0,//描边透明度
   
strokeWeight: 2, //描边线的像素
   
fillColor: '#FF0000',//填充颜色
   
fillOpacity: 0.35//填充透明度
});

    //获得路径
    var path=testPolygon.getPath();
    //请在路径上监听事件
    path.addListener('set_at',function () {
        
console.log(this.getArray());
    });

 

侦听拖动事件

拖动形状时,会在拖动操作开始和结束时以及拖动期间触发事件。对于多段线、多边形、圆和矩形,将会触发下列事件。

事件

说明

dragstart

当用户开始拖动形状时触发。

drag

在用户拖动形状期间反复触发。

dragend

当用户停止拖动形状时触发。


获取正版授权

方式一:自动授权

关注官方微信号
BIGEMAP微信公众号
操作步骤:
①关注官方微信号
②点击【自助授权】
③按提示完成操作!
注:此功能暂未完成

方式二:点击加入

免费授权QQ群

QQ在线咨询在线客服

免费咨询电话

400-028-7262

山西福彩快乐十分

淘宝店铺

bigemap.taobao.com

联系我们
  • 老火靓汤一天中何时喝最好? 2019-04-17
  • 陈晓卿推出全新美食纪录片 "风味"能否再续辉煌? 2019-04-17
  • 詹皇通知骑士队 准备与其续约 2019-04-11
  • 张瑜的专栏作者中国国家地理网 2019-04-10
  • 尧都农商银行全力推进服务“三农”工作 2019-04-09
  • [大笑]那依然是按劳(劳动价值或劳动能力)分配也! 2019-04-09
  • 台花莲发生6.5级地震已致2人遇难 2019-03-28
  • 谋求共同发展的强大动力(钟声) 2019-03-17
  • 广州整治校外培训机构:禁止超纲教学等行为 2019-03-17
  • 金参考|民粹政府上台 意大利会成为欧元区下一个风险点吗? 2018-09-04
  • 美媒:“打不死的”墨西哥蝾螈濒临灭绝 2018-09-04
  • 朝美领导人签署联合声明  确定半岛无核和平目标 2018-07-25
  • 第十二届中国(南宁)国际园林博览会相约绿城冬季 2018-07-24
  • 《刺客信条:奥德赛》将持续提供定期内容更新 2018-07-24
  • 报道新闻记录历史 70载人民日报见证中国发展大事 2018-07-23
  • 570| 398| 554| 868| 533| 413| 73| 734| 986| 186|