앵커를 추적하면서 심볼 회전하기

Google Maps API v3.9에 추가 된 새로운 Symbol feature을 테스트하기 시작했습니다. 지도에 삼각형 모양의 심볼이 여러 개 있고 싶습니다. 프로그래밍 방식으로 회전시킬 수 있기를 바랍니다. 내가 이전에 가지고 있었던 것은 각각 하나가 단지 10도 회전 된 마지막 이미지의 사본 인 png 이미지 세트였다 (MyIcon_0, MyIcon_10, ..., MyIcon350). 그런 다음 원하는 회전 각도에 가장 가까운 이미지를 그립니다.앵커를 추적하면서 심볼 회전하기

새로운 기호 기능을 사용하는 것이 훨씬 쉬운 방법 인 것처럼 보였으므로 이로 인해 프로그램 적으로 회전과 색상을 완벽하게 제어 할 수있었습니다. 나는 때문에 다음,이만큼 "rotationAngle"가 0으로 설정되어 제대로 작동

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);

다음 SVG 경로 표기를 사용

는

, 나는 간단한 삼각형을 정의하고,이 같은 마커에 붙어 심볼을지도의 올바른 위치에 놓으려면 앵커가 무엇을해야하는지 알아야합니다. 나는 앵커가 항상 삼각형의 "예각의 코너"에 있기를 원합니다.

다른 회전 각도가있을 때 문제가 발생합니다. 기호는 직사각형 캔버스에 그려지며 캔버스의 크기는 내부 모양에 가장 잘 맞도록 자동 계산됩니다. 이 삼각형과 같은 심볼을 회전하면 회전을 기준으로 크기가 다른 캔바스가 생기므로 앵커가 캔바스 크기에 상대적으로 설정되어있는 것처럼 심볼을 올바르게 배치하기가 어렵습니다.

실제 캔버스의 크기 만 제어 할 수 있다면 심볼을 그려서 앵커가 항상 캔버스의 중앙에 오도록 할 수 있으며 상수 앵커를 설정할 수 있습니다 . 어떻게 든 가능합니까? 모양 주위에 보이지 않는 원을 그릴 수있는 가능성에 대해 생각했습니다. 캔버스 크기를 일정하게 유지해야하지만 SVG 경로 표기법에 너무 익숙하지 않습니다.이 방법이 가능한지 모르겠습니다.

이 문제에 대해 건설적인 의견을 보내 주심에 감사드립니다.

출처

2012-09-18 Knut Marius

벡터 경로는 22x22 픽셀의 정사각형 안에 있어야합니다 <= 11px 및 앵커 11,11 원의 중심을 중심으로 회전해야합니다. –

의견을 보내 주셔서 감사합니다! 나는 폴리선을 사용하지 않고 마커를 사용합니다. 나는 22x22px보다 작은 내 심볼을 사용하여 모든 심볼 크기를 22x22 픽셀로 만들지 만, 여전히 캔버스가 심볼에 맞게 충분히 크게 설정되었는지 확인하려고했습니다. (12x8px, 15x14px 등. 회전을 기반으로 함). 내 보이지 않는 원이 없었습니다. 보이는 삼각형과 같은 기호 안에 보이지 않는 원을 삽입 할 수 있는지 아직 알 수 없기 때문입니다. 같은 캔버스에 여러 기호를 설정할 수 있는지 알고 있습니까? (내 삼각형에 하나, 보이지 않는 원에 하나) –

가능한 중복 [[LatLon에서 SymbolPath에 Google지도 배치]] (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

앵커를 추적하면서 심볼 회전하기

답변

관련 문제