marker drag 후에 maker 좌표값 얻는 방법

[kimdindoo]

marker drag 후에 maker 좌표값 얻는 방법이 있을까요?

[johyunchol]

marker draggable 옵션에 따라 addListener 를 해주면 될거 같네요. 이부분은 수정 해서 버전 업데이트 해야 할거 같습니다!

[kimdindoo]

아 추후 업데이트때 수정해서 넣어주심 감사하겠습니다!

[johyunchol]

0.1.4 버전에 해당 기능 추가 해서 업데이트 했습니다!

overlay_2_marker_draggable_screen.dart 파일에 사용하는 예시가 있습니다.

draggable 이 true 일때 onMarkerDragChangeCallback 이 있으면 해당 Callback 으로 start, end 이벤트가 전달되고 markerId, 좌표, zoomLevel 같이 받아서 사용할 수 있습니다!

이 이슈는 close 할게요!

[kimdindoo]

빠른 기능 추가 감사드립니다. 확인해보니 onMarkerDragChangeCallback 안에 다른 함수를 같이 사용 하면 문제가 생기는 거 같습니다. onMarkerTap 까지 문제가 생기네요.

아래는 onMarkerDragChangeCallback 안에 사용한 함수입니다.

  save(double lat, double lon) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setDouble('lat', lat);
    await prefs.setDouble('lon', lon);
  }

아래는 콘솔 오류 화면입니다.

"Uncaught ReferenceError: onMarkerDragChangeCallback is not defined", source: about:blank (438)
"Uncaught ReferenceError: onMarkerTap is not defined", source: about:blank (458)

[johyunchol]

안녕하세요. 확인이 늦었습니다.

제가 코드로 테스트 했을때는 onMarkerTap과 onMarkerDragChangeCallback 둘다 정상 작동하는데 어떻게 나오는지 확인이 필요합니다.

조금 더 자세한 코드와 로그를 남겨주실 수 있으실까요?

KakaoMap(
            onMapCreated: ((controller) async {
              mapController = controller;

              markers.add(marker);

              setState(() {});
            }),
            onMarkerTap: ((String markerId, LatLng latLng, int zoomLevel) {
              print(markerId);
            }),
            onMarkerDragChangeCallback:
                ((String markerId, LatLng latLng, int zoomLevel, MarkerDragType markerDragType) {

              if (markerDragType == MarkerDragType.end) {
                mapController.panTo(latLng);

              }
            }),
            markers: markers.toList(),
            center: LatLng(37.3608681, 126.9306506),
          )

저는 이렇게 했을 때 둘다 정상적으로 인식 했었습니다.

[kimdindoo]

shared_preferences 패키지랑 함께 썼을때

"Uncaught ReferenceError: onMarkerDragChangeCallback is not defined", source: about:blank (438) 라는 메세지와 함께 아래 영상처럼 드래그가 되지 않습니다.

https://github.com/johyunchol/kakao_map_plugin/assets/87438680/a3a79043-dffe-4707-9b54-fe0403419b64

https://github.com/johyunchol/kakao_map_plugin/assets/87438680/ab13e06a-bdc5-4d09-9627-6456dc51a50c

아래는 제 코드 입니다.

  class Overlay2MarkerDraggableScreen extends StatefulWidget {
  const Overlay2MarkerDraggableScreen({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  State<Overlay2MarkerDraggableScreen> createState() =>
      _Overlay2MarkerDraggableScreenState();
}

class _Overlay2MarkerDraggableScreenState
    extends State<Overlay2MarkerDraggableScreen> {
  late KakaoMapController mapController;

  Set<Marker> markers = {};
  late Marker marker;
  late Marker startMarker;

  @override
  void initState() {
    marker = Marker(
      markerId: 'markerId',
      latLng: LatLng(37.3608681, 126.9306506),
    );

    startMarker = Marker(
      markerId: 'startMarkerId',
      latLng: LatLng(37.3608681, 126.930650),
      draggable: true,
      markerImageSrc:
          'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/red_drag.png',
    );

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? selectedTitle),
      ),
      body: Stack(
        children: [
          KakaoMap(
            onMapCreated: ((controller) async {
              mapController = controller;

              SharedPreferences prefs = await SharedPreferences.getInstance();

              double? lat = prefs.getDouble('lat');
              double? lng = prefs.getDouble('lng');

              markers.add(marker);

              markers.add(startMarker
                ..latLng = LatLng(lat ?? 37.3608681, lng ?? 126.930650));

              setState(() {});
            }),
            onMarkerTap: (markerId, latLng, zoomLevel) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('marker click:\n\n$latLng'),
                  duration: const Duration(milliseconds: 1000),
                ),
              );
            },
            onMarkerDragChangeCallback: ((String markerId, LatLng latLng,
                int zoomLevel, MarkerDragType markerDragType) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('marker drag:\n\n$latLng'),
                  duration: const Duration(milliseconds: 1000),
                ),
              );
              save(latLng.latitude, latLng.longitude);
              if (markerDragType == MarkerDragType.end) {
                mapController.panTo(latLng);
              }
            }),
            markers: markers.toList(),
            center: LatLng(37.3608681, 126.9306506),
          ),
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Row(
              children: [
                MaterialButton(
                  onPressed: () {
                    marker.draggable = true;

                    setState(() {});
                  },
                  color: Colors.white,
                  child: const Text("draggable true"),
                ),
                const SizedBox(width: 8),
                MaterialButton(
                  onPressed: () {
                    marker.draggable = false;

                    setState(() {});
                  },
                  color: Colors.white,
                  child: const Text("draggable false"),
                ),
                const SizedBox(width: 8),
                MaterialButton(
                  onPressed: () async {
                    SharedPreferences prefs =
                        await SharedPreferences.getInstance();
                  },
                  color: Colors.white,
                  child: const Text("저장값 확인"),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  save(double lat, double lon) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setDouble('lat', lat);
    await prefs.setDouble('lon', lon);
  }
}

[kimdindoo]

혹시 다른 질문인데 https://apis.map.kakao.com/web/sample/basicDrawingLibrary/ 이런 다각형 그리기 기능도 지원가능할까요?

[johyunchol]

https://github.com/johyunchol/kakao_map_plugin/assets/3314683/a2670ef2-827e-4364-8b54-a6ab4472cd1e

보내주신 소스로 동일하게 해 봤는데 잘 되고 있습니다. 다시 한 번 확인 가능할까요?

[johyunchol]

다각형 그리기 기능은 현재 구현이 안되어 있습니다. 이 부분도 구현예정이긴 한데 지난 번 https://apis.map.kakao.com/web/sample/keywordBasic/ 과 같이 키워드로 장소 검색기능을 구현하려고 보니 서버형태로 띄워가 가능한 것 같더라구요.

drawing 형식이 가능한지는 확인이 필요할거 같습니다.

---

다른분이 https://github.com/johyunchol/kakao_map_plugin/issues/5 이슈에 services 구현에 대해 문의 남겨주신 내용에 답한 내용이 있습니다.

[johyunchol]

drawing 라이브러리 관련하여 찾아보니

https://devtalk.kakao.com/t/drawing-library/115177 https://devtalk.kakao.com/t/topic/102414/2

이런 내용이 있네요. 결론적으로는 안된다는 내용인 듯 합니다. 필요하면 직접 구현해야 하구요.

https://apis.map.kakao.com/web/sample/basicDrawingLibrary/

이 페이지를 모바일에서 들어가 보니 해당 버튼들이 동작을 안하더라구요.

[kimdindoo]

답변이 늦었네요. 다시 한번 확인하니 또 정상작동 하네요. 확인해주셔서 감사합니다.

[kimdindoo]

https://apis.map.kakao.com/web/sample/basicDrawingLibrary/

저도 웹뷰로 모바일 환경에서 해당 버튼이 동작안하는거 보고 여쭤봤었는데 모바일에선 지원을 안하나보네요. 감사합니다.