1. 首頁
  2. 問答
  3. 如何在谷歌地圖V3折線，並使其enableDrawing

如何在谷歌地圖V3折線，並使其enableDrawing

2010-03-31 65 views

回答

0

這是一個痛苦的執行，但它是可能的。我使用狀態模式來跟蹤數字化過程。我使用EXT JS，所以我試圖包含嚴格JavaScript的東西。點擊按鈕後，數字化對象會跟蹤，無論是數字化還是NOT_DIGITIZING或EDITING。狀態還會跟蹤我需要處理的幾何類型：POINT，POLYLINE，POLYGON。按鈕可用來設置狀態。我將捕獲地圖點擊：

google.maps.event.addListener(map,"click",digitizer.onDigitize.createDelegate(digitizer)); 
google.maps.event.addListener(map,"dblclick",digitizer.endDigitize.createDelegate(digitizer));

在數字化儀對象中，我跟蹤了數字化多邊形和點。無論何時用戶點擊，我都會將事件內的latLng發送到跟蹤對象。

this.digitizedGeometry.getPath().push(e.latLng);

這對於折線和多邊形都適用。我只跟蹤簡單的拓撲結構，而不是用於此的環形面或多個幾何圖形。

編輯和刪除點更困難。

首先，我必須跟蹤用戶是選擇了其幾何圖形是POLYLINE還是POLYGON，並將此幾何圖形置於數字化儀中的editGeometry變量中，並啓用了編輯按鈕。

我循環瀏覽編輯幾何圖形的路徑，並添加具有不同樣式的標記和中點標記，以確保標記可拖動。

var path = this.editGeometry.getPath(); 
for (var i = 0; i < path.getLength(); i++) { 
    // Add point geometry markers 
    var point = path.getAt(i); 
    var latLng = new google.maps.LatLng(point.lat(), point.lng()); 
    var markerOptions = {position: latLng, map: mapPanel.getMap()}; 
    Ext.apply(markerOptions, digitizer.markerStyle); 
    var marker = new google.maps.Marker(markerOptions); 

    // Used to track the latLng associated with the marker when position changes. 
    marker.edit = { 
     path: path, 
     position: i, 
     isMidpoint: false 
    }; 
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true)); 
    google.maps.event.addListener(marker, "rightclick", digitizer.onContextMenu.createDelegate(mapPanel, marker, true)); 
    digitizer.editHandles.push(marker); 

    // determine the midpoint 
    var nextValue = (i+1) % path.getLength(); 
    var otherPoint = path.getAt(nextValue); 

    var latLng = new google.maps.LatLng((point.lat() + otherPoint.lat())/2.0, (point.lng() + otherPoint.lng())/2.0); 
    var markerOptions = {position: latLng, map: mapPanel.getMap()}; 
    Ext.apply(markerOptions, digitizer.midpointMarkerStyle); 
    var marker = new google.maps.Marker(markerOptions); 

    marker.edit = { 
     path: path, 
     position: i, 
     isMidpoint: true 
    }; 
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true)); 
    digitizer.editHandles.push(marker); 
}

關鍵部分是「dragend」，並應用編輯。如果這是路徑中的實際點，我會移動該點並重新確定中點。

marker.edit.path.setAt(marker.edit.position, e.latLng); 

// Adjust midpoints 
var index = handles.indexOf(marker); 
var prev = (index - 2 + handles.length) % handles.length; 
var mpprev = (index - 1 + handles.length) % handles.length; 
var next = (index + 2) % handles.length; 
var mpnext = (index + 1) % handles.length; 
var prevMarker = handles[prev]; 
var nextMarker = handles[next]; 
var prevMpMarker = handles[mpprev]; 
var nextMpMarker = handles[mpnext]; 
prevMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + prevMarker.getPosition().lat())/2.0, (e.latLng.lng() + prevMarker.getPosition().lng())/2.0)); 
nextMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + nextMarker.getPosition().lat())/2.0, (e.latLng.lng() + nextMarker.getPosition()

你可以看到這是如何涉及到的。如果你不想要中點，那麼上面代碼的第一行就足夠了。應用中點更多。您必須將中點追加到路徑上，並移動所有位置，並添加一個新的中點並調整前一箇中點。如果我想刪除一個點，我將不得不刪除該點，減少手柄的位置，刪除一箇中點並重新調整前一箇中點。

希望這會讓你對如何做到這一點有所瞭解。太糟糕了，而不是2行代碼，200行代碼，但它可以讓你靈活地做你想做的任何事情，包括設置標記樣式。

來源

2010-07-26 03:07:13 CrazyEnigma

相關問題

 相關問題