선의 거리 계산하기

지도를 마우스로 클릭하면 선 그리기가 시작되고 오른쪽 마우스를 클릭하면 선 그리기가 종료되면서 그려진 선의 실제 거리(단위 : m)를 표시합니다.

지도를 마우스로 클릭하면 선 그리기가 시작되고

오른쪽 마우스를 클릭하면 선 그리기가 종료됩니다

original docs : https://apis.map.kakao.com/web/sample/calculatePolylineDistance/

결과

Loading...

라이브 에디터

function(){ const [isdrawing, setIsdrawing] = useState(false) const [clickLine, setClickLine] = useState() const [paths, setPaths] = useState([]) const [distances, setDistances] = useState([]) const [mousePosition, setMousePosition] = useState({ lat: 0, lng: 0, }) const [moveLine, setMoveLine] = useState() const handleClick = ( _map, mouseEvent ) => { if (!isdrawing) { setDistances([]) setPaths([]) } setPaths((prev) => [ ...prev, { lat: mouseEvent.latLng.getLat(), lng: mouseEvent.latLng.getLng(), }, ]) setDistances((prev) => [ ...prev, Math.round(clickLine.getLength() + moveLine.getLength()), ]) setIsdrawing(true) } const handleMouseMove = ( _map, mouseEvent ) => { setMousePosition({ lat: mouseEvent.latLng.getLat(), lng: mouseEvent.latLng.getLng(), }) } const handleRightClick = ( _map, _mouseEvent ) => { setIsdrawing(false) } const DistanceInfo = ({ distance }) => { const walkkTime = (distance / 67) | 0 const bycicleTime = (distance / 227) | 0 return ( <ul className="dotOverlay distanceInfo"> <li> <span className="label">총거리</span>{" "} <span className="number">{distance}</span>m </li> <li> <span className="label">도보</span>{" "} {walkkTime > 60 && ( <> <span className="number">{Math.floor(walkkTime / 60)}</span> 시간{" "} </> )} <span className="number">{walkkTime % 60}</span> 분 </li> <li> <span className="label">자전거</span>{" "} {bycicleTime > 60 && ( <> <span className="number">{Math.floor(bycicleTime / 60)}</span>{" "} 시간{" "} </> )} <span className="number">{bycicleTime % 60}</span> 분 </li> </ul> ) } return ( <> <CalculatePolylineDistanceStyle /> <Map // 지도를 표시할 Container id={`map`} center={{ // 지도의 중심좌표 lat: 37.498004414546934, lng: 127.02770621963765, }} style={{ // 지도의 크기 width: "100%", height: "450px", }} level={3} // 지도의 확대 레벨 onClick={handleClick} onRightClick={handleRightClick} onMouseMove={handleMouseMove} > <Polyline path={paths} strokeWeight={3} // 선의 두께입니다 strokeColor={"#db4040"} // 선의 색깔입니다 strokeOpacity={1} // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다 strokeStyle={"solid"} // 선의 스타일입니다 onCreate={setClickLine} /> {paths.map((path) => ( <CustomOverlayMap key={`dot-${path.lat},${path.lng}`} position={path} zIndex={1} > <span className="dot"></span> </CustomOverlayMap> ))} {paths.length > 1 && distances.slice(1, distances.length).map((distance, index) => ( <CustomOverlayMap key={`distance-${paths[index + 1].lat},${paths[index + 1].lng}`} position={paths[index + 1]} yAnchor={1} zIndex={2} > {!isdrawing && distances.length === index + 2 ? ( <DistanceInfo distance={distance} /> ) : ( <div className="dotOverlay"> 거리 <span className="number">{distance}</span>m </div> )} </CustomOverlayMap> ))} <Polyline path={isdrawing ? [paths[paths.length - 1], mousePosition] : []} strokeWeight={3} // 선의 두께입니다 strokeColor={"#db4040"} // 선의 색깔입니다 strokeOpacity={0.5} // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다 strokeStyle={"solid"} // 선의 스타일입니다 onCreate={setMoveLine} /> {isdrawing && ( <CustomOverlayMap position={mousePosition} yAnchor={1} zIndex={2}> <div className="dotOverlay distanceInfo"> 총거리{" "} <span className="number"> {Math.round(clickLine.getLength() + moveLine.getLength())} </span> m </div> </CustomOverlayMap> )} </Map> </> ) }

function(){
  const [isdrawing, setIsdrawing] = useState(false)
  const [clickLine, setClickLine] = useState()
  const [paths, setPaths] = useState([])
  const [distances, setDistances] = useState([])
  const [mousePosition, setMousePosition] = useState({
    lat: 0,
    lng: 0,
  })
  const [moveLine, setMoveLine] = useState()

  const handleClick = (
    _map,
    mouseEvent
  ) => {
    if (!isdrawing) {
      setDistances([])
      setPaths([])
    }
    setPaths((prev) => [
      ...prev,
      {
        lat: mouseEvent.latLng.getLat(),
        lng: mouseEvent.latLng.getLng(),
      },
    ])
    setDistances((prev) => [
      ...prev,
      Math.round(clickLine.getLength() + moveLine.getLength()),
    ])
    setIsdrawing(true)
  }

  const handleMouseMove = (
    _map,
    mouseEvent
  ) => {
    setMousePosition({
      lat: mouseEvent.latLng.getLat(),
      lng: mouseEvent.latLng.getLng(),
    })
  }

  const handleRightClick = (
    _map,
    _mouseEvent
  ) => {
    setIsdrawing(false)
  }

  const DistanceInfo = ({ distance }) => {
    const walkkTime = (distance / 67) | 0
    const bycicleTime = (distance / 227) | 0

    return (
      <ul className="dotOverlay distanceInfo">
        <li>
          <span className="label">총거리</span>{" "}
          <span className="number">{distance}</span>m
        </li>
        <li>
          <span className="label">도보</span>{" "}
          {walkkTime > 60 && (
            <>
              <span className="number">{Math.floor(walkkTime / 60)}</span> 시간{" "}
            </>
          )}
          <span className="number">{walkkTime % 60}</span> 분
        </li>
        <li>
          <span className="label">자전거</span>{" "}
          {bycicleTime > 60 && (
            <>
              <span className="number">{Math.floor(bycicleTime / 60)}</span>{" "}
              시간{" "}
            </>
          )}
          <span className="number">{bycicleTime % 60}</span> 분
        </li>
      </ul>
    )
  }

  return (
    <>
      <CalculatePolylineDistanceStyle />
      <Map // 지도를 표시할 Container
        id={`map`}
        center={{
          // 지도의 중심좌표
          lat: 37.498004414546934,
          lng: 127.02770621963765,
        }}
        style={{
          // 지도의 크기
          width: "100%",
          height: "450px",
        }}
        level={3} // 지도의 확대 레벨
        onClick={handleClick}
        onRightClick={handleRightClick}
        onMouseMove={handleMouseMove}
      >
        <Polyline
          path={paths}
          strokeWeight={3} // 선의 두께입니다
          strokeColor={"#db4040"} // 선의 색깔입니다
          strokeOpacity={1} // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
          strokeStyle={"solid"} // 선의 스타일입니다
          onCreate={setClickLine}
        />
        {paths.map((path) => (
          <CustomOverlayMap
            key={`dot-${path.lat},${path.lng}`}
            position={path}
            zIndex={1}
          >
            <span className="dot"></span>
          </CustomOverlayMap>
        ))}
        {paths.length > 1 &&
          distances.slice(1, distances.length).map((distance, index) => (
            <CustomOverlayMap
              key={`distance-${paths[index + 1].lat},${paths[index + 1].lng}`}
              position={paths[index + 1]}
              yAnchor={1}
              zIndex={2}
            >
              {!isdrawing && distances.length === index + 2 ? (
                <DistanceInfo distance={distance} />
              ) : (
                <div className="dotOverlay">
                  거리 <span className="number">{distance}</span>m
                </div>
              )}
            </CustomOverlayMap>
          ))}
        <Polyline
          path={isdrawing ? [paths[paths.length - 1], mousePosition] : []}
          strokeWeight={3} // 선의 두께입니다
          strokeColor={"#db4040"} // 선의 색깔입니다
          strokeOpacity={0.5} // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
          strokeStyle={"solid"} // 선의 스타일입니다
          onCreate={setMoveLine}
        />
        {isdrawing && (
          <CustomOverlayMap position={mousePosition} yAnchor={1} zIndex={2}>
            <div className="dotOverlay distanceInfo">
              총거리{" "}
              <span className="number">
                {Math.round(clickLine.getLength() + moveLine.getLength())}
              </span>
              m
            </div>
          </CustomOverlayMap>
        )}
      </Map>
    </>
  )
}