在跟蹤錨點的同時旋轉符號

我剛剛開始測試添加到Google Maps API v3.9中的新Symbol feature。我想在地圖上有多個類似三角形的符號，我希望能夠以編程方式旋轉它們。我之前所做的是一組png圖像，每個圖像都是最後一個圖像的副本，旋轉了10度（MyIcon_0，MyIcon_10，...，MyIcon350）。然後我會畫出最接近我想要的旋轉角度的圖像。在跟蹤錨點的同時旋轉符號

改爲使用新的符號功能看起來像是一種更簡單的方法，它以編程方式完全控制旋轉和顏色。

使用SVG路徑表示法，我定義了一個簡單的三角形，並把它貼這樣的標記：

var markerOptions = { 
    icon: { 
     path: "M 0 5 L 20 5 L 10 40 z", 
     rotation: rotationAngle, 
     anchor: [something] 
    }, 
    position: position 
}; 

var marker = new Marker(markerOptions);

這隻要在「rotationAngle」設置爲0正常工作，因爲我當時知道什麼錨將必須是爲了把符號放在地圖上的正確位置。我希望錨總是在三角形的「銳角」處。

當我有另一個旋轉角度時會出現問題。該符號繪製在矩形畫布上，並且畫布的尺寸似乎自動計算以最適合內部形狀。當你像這個三角形一樣旋轉一個符號時，你將有一個基於旋轉的不同尺寸的畫布，這使得很難在地圖上正確定位符號，因爲錨點似乎相對於畫布尺寸進行了設置。

如果我只能控制實際畫布的大小，我將能夠繪製符號，以便錨點始終位於畫布的中心，然後可以設置常量錨點。這是否有可能？我正在考慮在圖形周圍畫一個看不見的圓的可能性，這將確保畫布大小不變，但我對SVG路徑符號不太熟悉，我不知道這是否可以實現。

對於此事的任何建設性反饋，我們將非常感激。

來源

2012-09-18 Knut Marius

上的折線的矢量路徑必須落入22x22px正方形內，所以如果您的無形圓半徑爲<= 11像素和錨11,11它應該旋轉圓中心 –

感謝您的評論！我不使用折線，而是使用標記。我嘗試使用我的符號（小於22x22像素）的一個非常小的版本，看看是否會使所有的符號大小爲22x22px，但仍然畫布設置得足夠大，以適應符號。（12x8px，15x14px等基於旋轉）。那沒有一個周圍的不可見圓圈，因爲我仍然不知道是否可以在與我可見的三角形相同的符號內插入一個不可見圓圈。你知道是否可以在同一個畫布上設置多個符號？（一個用於我的三角形，一個用於隱形圈） –

[定位谷歌地圖上的SymbolPath on LatLon]的可能重複（http://stackoverflow.com/questions/28254425/centering-google-maps-symbolpath-on-latlon） – geocodezip

將您的主播設置爲（10,20）。

var icon = { 
     path: "M 0 5 L 20 5 L 10 40 z", 
     scale: 1, 
     strokeWeight: 2, 
     fillColor: '#009933', 
     fillOpacity: 0.001, 
     anchor: new google.maps.Point(10, 20) 
    };

working fiddle

工作的代碼片斷：

var map; 
 
var angle = 0; 
 
var marker; 
 
var icon = { 
 
    path: "M 0 5 L 20 5 L 10 40 z", 
 
    scale: 1, 
 
    strokeWeight: 2, 
 
    fillColor: '#009933', 
 
    fillOpacity: 0.001, 
 
    anchor: new google.maps.Point(10, 20) 
 
}; 
 

 
function init() { 
 
    var startLatLng = new google.maps.LatLng(50.124462, -5.539994); 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    center: startLatLng, 
 
    zoom: 12 
 
    }); 
 

 
    var ptMarker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(50.124462, -5.539994), 
 
    map: map, 
 
    icon: { 
 
     url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", 
 
     size: new google.maps.Size(7, 7), 
 
     anchor: new google.maps.Point(4, 4) 
 
    } 
 
    }); 
 
    marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(50.124462, -5.539994), 
 
    icon: icon 
 
    }); 
 
    marker.setMap(map); 
 
    var circleMarker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(50.124462, -5.539994), 
 
    map: map, 
 
    icon: { 
 
     path: google.maps.SymbolPath.CIRCLE, 
 
     scale: 24, 
 
     strokeWeight: 2, 
 
     fillColor: '#009933', 
 
     fillOpacity: 0.001, 
 
     anchor: new google.maps.Point(0, 0) 
 
    } 
 
    }); 
 

 
    setInterval(function() { 
 
    angle += 30; 
 
    icon.rotation = angle; 
 
    marker.setIcon(icon); 
 
    }, 1000); 
 

 
} 
 

 
google.maps.event.addDomListener(window, 'load', init);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

來源

2015-01-31 23:05:27 geocodezip

在跟蹤錨點的同時旋轉符號

回答

相關問題