编辑和拖动
编辑时间: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-06-20
  • 坚持和完善我国基本经济制度的两条新经验(纪念改革开放四十周年) 2019-06-20
  • 比肩郭艾伦之人欲联手新疆冲冠?国产助攻王成X因素 2019-06-07
  • 光明日报:救命药岂能一降价就断货 2019-05-29
  • 2017网上群众工作优秀案例 2019-05-24
  • 只要等一等就能多“等”出8600万美元! 2019-05-24
  • 回复@大雨582:任何人的自由发展都是跟他的能力意愿行动及生成的结果平滑对接的。 2019-05-07
  • 印度军用运输机从高原机场起飞 吹起一场沙尘暴 2019-05-07
  • 中小企业板成立14年 累计实现净利润1.25万亿元 2019-05-06
  • 老火靓汤一天中何时喝最好? 2019-04-17
  • 陈晓卿推出全新美食纪录片 "风味"能否再续辉煌? 2019-04-17
  • 詹皇通知骑士队 准备与其续约 2019-04-11
  • 张瑜的专栏作者中国国家地理网 2019-04-10
  • 尧都农商银行全力推进服务“三农”工作 2019-04-09
  • [大笑]那依然是按劳(劳动价值或劳动能力)分配也! 2019-04-09
  • 重庆幸运农场定胆计划群 体彩任选14场胜负 四川快乐12走势图电脑版 香港赛马会免费资料大全一 江苏11选5全天计划 双色球ac值计算 冰球基本功视频 搜狐彩票app 今期生肖开红花打一肖 福彩20选8奖金 欢乐斗地主赵 彩票排列五和值走势图带连线 2019意甲直播 腾讯分分彩开奖过程 十一运夺金直播