marker.js
var markerPositions = [[126.8517037,-37.5324785,"TwoWheeler"], [126.8554410,-37.5378600,"Pedestrian"], [126.8538170,-37.5338370,"Vehicle"]];
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
for (var i=0; i<markerPositions.length; i++) {
if(markerPositions[i][2] == "TwoWheeler"){
// Create an SVG <use> element
var use = document.createElementNS(svgNS, "use");
// Point it at our pin marker (the circle)
use.setAttributeNS(xlinkNS, "href", "#TwoWheeler");
// Set it's x and y
use.setAttribute("x", markerPositions[i][0]);
use.setAttribute("y", markerPositions[i][1]);
// Add it to the "markers" group
document.getElementById("markers").appendChild(use);
}
else if(markerPositions[i][2] == "Pedestrian"){
var use = document.createElementNS(svgNS, "use");
use.setAttributeNS(xlinkNS, "href", "#Pedestrian");
use.setAttribute("x", markerPositions[i][0]);
use.setAttribute("y", markerPositions[i][1]);
document.getElementById("markers").appendChild(use);
}
else if(markerPositions[i][2] == "Vehicle"){
var use = document.createElementNS(svgNS, "use");
use.setAttributeNS(xlinkNS, "href", "#Vehicle");
use.setAttribute("x", markerPositions[i][0]);
use.setAttribute("y", markerPositions[i][1]);
document.getElementById("markers").appendChild(use);
}
}
setAttributeNS
사용할 마커의 id 지정
마커의 위치 지정
메인 html 파일에 요소 추가
main.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<head>
<title>
test
</title>
</head>
<body>
<div>
<div class="left" id="left">
<script async src="map.js"></script>
<svg version="1.1" width="800px" height="800px"
viewBox="126.8510100 -37.5309131 0.0084246 0.0076997" id="svgsvg">
<g transform="matrix(1 0 0 -1 0 0.0076997)">
중략
</g>
<defs>
<image id="TwoWheeler" x="0" y="0" height="0.00015" width="0.00015" xlink:href="TwoWheeler.png" transform="matrix(1 0 0 -1 0 0.0076997)" visibility="visible"></image>
<image id="Pedestrian" x="0" y="0" height="0.00015" width="0.00015" xlink:href="Pedestrian.png" transform="matrix(1 0 0 -1 0 0.0076997)" visibility="visible"></image>
<image id="Vehicle" x="0" y="0" height="0.00015" width="0.00015" xlink:href="Vehicle.png" transform="matrix(1 0 0 -1 0 0.0076997)" visibility="visible"></image>
</defs>
<g id="markers">
</g>
</svg>
<script async src="marker.js"></script>
</div>
<div class="right">
<script src="right.js"></script>
</div>
</div>
</body>
중략된 부분은 배경 이미지
<def> 태그 안에 있는 이미지 파일이 삽입할 마커 이미지
transform
배경과 위치(좌표)를 맞추기 위해 사용
https://docs.aspose.com/svg/net/drawing-basics/transformation-matrix/
'Code > Javascript' 카테고리의 다른 글
| [Javascript] AJAX 이용한 API 통신 (바닐라 JS) (0) | 2023.11.14 |
|---|---|
| [Javascript] from origin 'null' has been blocked by CORS Policy (0) | 2023.11.13 |
| [Javascript] svg 드래그 이동시 정확히 마우스 위치로 이동시키기 (0) | 2023.11.13 |
| [Javascript] 마우스를 이용한 svg 드래그 이동 기능 구현 (0) | 2023.11.09 |
| [Javascript] 마우스 휠(스크롤)을 이용한 svg 확대/축소 줌 기능 구현 (3) | 2023.11.09 |