谷歌離線地圖 教程

                編輯和拖動

                編輯時間:2017-03-03

                可由用戶編輯和拖動的形狀

                將形狀設置為可編輯會給形狀添加手柄,用戶可以利用手柄直接在地圖上對形狀進行位置調整、重新塑形和尺寸

                調整。您還可以將形狀設置為可拖動,以便用戶將其移至地圖上的其他地點。用戶對對象做出的更改無法跨會話

                存留。如果您想保存用戶的編輯,必須自行采集和存儲信息。

                將形狀設置為可編輯

                可通過在形狀的選項中將 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

                當用戶停止拖動形狀時觸發。


                主站蜘蛛池模板: 久久国产精品99久久小说| 动漫美女和男人羞羞漫画| 亚洲中文字幕av在天堂| 美团外卖猛男男同38分钟| 女地狱肉之壶极限调教2| 久草视频在线网| 草草影院ccyy国产日本欧美| 岛国在线观看视频| 亚洲av成人一区二区三区| 色噜噜狠狠成人中文综合| 天天色综合图片| 久久久无码人妻精品无码| 精品久久久中文字幕二区| 国产女同在线观看| 一级视频免费观看| 欧美日韩亚洲国产一区二区综合| 国产成人tv在线观看| 一级特级aaaa毛片免费观看| 最新国产精品自在线观看| 午夜视频免费成人| 91一区二区在线观看精品| 日韩欧美国产师生制服| 免费观看的黄色网址| 2018天天射| 把胡萝卜立着自己坐上去| 亚洲一级大黄大色毛片| 浮力影院第一页| 国产在线精品一区二区不卡| 91亚洲精品第一综合不卡播放| 成人免费无码大片a毛片软件 | 青青草娱乐视频| 天天躁日日躁狠狠躁性色AVQ| 久久久久久九九精品久小说 | 9i9精品国产免费久久| 日韩精品无码一区二区三区| 亚洲欧美另类综合| 老汉扛起娇妻玉腿进入h文| 国产自无码视频在线观看| zzzzzzz中国美女| 成年人在线免费看| 久久午夜无码鲁丝片直播午夜精品|