Google지도에 svg 마커를 올바르게 배치하는 방법은 무엇입니까?

Question

나는 svg 마커를 가지고 있으며 자바 스크립트 API를 통해 Google지도에 배치하려고합니다.

지도를 축소하면 마커가 정렬되지 않는 것이 문제입니다.

M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4 :

이

내 SVG 경로입니다 , 10,4S20,8.4,20,13.8z 이미 내가 마커에 대한 앵커를 설정할 필요가 연구 한 바로는

new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(33.788303, -118.001511), 
    icon: { 
     path: "M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4,10,4S20,8.4,20,13.8z", 
     fillColor: '#1193c5', 
     fillOpacity: 1, 
     strokeWeight: 1, 
     strokeColor: 'black' 
    } 
    }); 

하지만 방법이 SVG 경로의 앵커 포인트를 찾을 아무 생각이 없다 . 이 아이콘의 크기를 알고있는 경우 https://jsbin.com/gonehocafu/edit?html,js,output

Answer 1

그것은 계산할 수 있습니다 : 여기

은 작업 예입니다. 아이콘의 경로 원점은 왼쪽 상단 모서리입니다. 맨 아래 가운데로 이동하려면 x를 아이콘의 너비의 1/2, y를 아이콘의 높이로 설정합니다. SVG symbol 경우 a :

앵커 | 유형 : 점
마커 또는 폴리선을 기준으로 한 심볼의 위치입니다. 심볼 경로의 좌표는 앵커의 x와 y 좌표에 의해 왼쪽과 위로 각각 변환됩니다. 기본적으로 기호는 (0, 0)에 고정됩니다. 위치는 심볼의 경로와 동일한 좌표계로 표현됩니다.

나는 보통 시행 착오를 사용합니다. 당신의 아이콘이 작동하는 무슨 모양입니다 :

anchor: new google.maps.Point(10, 27) 

proof of concept fiddle

코드 :

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(33.788303, -118.001511), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    new google.maps.Marker({ 
 
    map: map, 
 
    position: new google.maps.LatLng(33.788303, -118.001511), 
 
    icon: { 
 
     path: "M20,13.8c0,5.5-4.4,9.3-10,14.2C4.4,23.1,0,19.3,0,13.8C0,8.4,4.5,4,10,4S20,8.4,20,13.8z", 
 
     fillColor: '#1193c5', 
 
     fillOpacity: 1, 
 
     strokeWeight: 1, 
 
     strokeColor: 'black', 
 
     anchor: new google.maps.Point(10, 27) 
 
    }, 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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"></div>