今日やるべきこと/フィルタUI、overlayタグ

🍊 今日の事

🍪 必須タスク

パスワードの変更、プロファイルの削除などのモード高さ調整

会員を脱退して登録してもよい<=エラー

ログアウト時にパスワードを入力する必要はなく、ユーザーインタフェースは

ログアウトするために変更する必要がある.
申請

ガイドカードモードウィンドウは、チャット状態によって統合する

を確認する必要がある.

🍊 今日のアレンジ

🍉 ガイドカードフィルタUIの変更

問題の状況

第1のUIは、旅行日、ガイドの性別によるフィルタリングの結果を以下の돋보기に示す.
しかし、1人の組員も対応する拡大鏡を押すかどうか分からないので、間違っていると思います.

トラブルシューティング

この点を改善するため、以下のようにUIを変更した.
文字적용하기のボタンは돋보기よりも直感的に案内されていると考えられ、以下のように変更された.

🍉 overlayを使用してタグを実装(タグ画像のロードを改善)

問題の状況

Kakao Markerの場合png, .タグはjpgのような画像ファイルに表示されているため、ネットワーク環境が遅い場合は地図やナビゲーションカードが表示されるが、下のタグだけは表示されないことが分かった.

  let imageSrc = '/asset/loading/loading4.png';
  let imageSize = new kakao.maps.Size(35, 35);
  let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

  // 새로운 마커 생성
  for (let i = 0; i < positions.length; i++) {
    let position = positions[i];
    let marker = new kakao.maps.Marker({
      map, // 마커를 표시할 지도
      position: new kakao.maps.LatLng(position.latitude, position.longitude), // 마커를 표시할 위치
      image: markerImage, // 마커 이미지
      clickable: true, // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정
    });

ソリューション

この問題を解決するために、彼はマークの代わりにCustom Overlayを使い、画像マークではなくマークで表現したいと思っています.
最初はdivラベルを使用し、cssを使用してタグの形状を作成する予定でした.ただし、ロードページを作成する過程でloading 4.svgファイルを作成し、svgタグに変更し直します.
(svgファイルをより速く作成した場合は、画像をsvgファイルに変更するだけで...)

📎 SVGラーニング

難点

タグタグタグをoverlayとマークするのは難しくありません.しかしオーバーレイにアクティビティを植え付ける過程でもうろうろしていた.
overlayはmarkerのようにイベントAPIを提供しない.この問題は、DOMにアクセスし、addEventListenerを介してイベントを送信することによって解決される.

前のソースコードの変更

  // 마커 이미지 / 이미지 크기 / 마커 이미지 생성
  let imageSrc = '/asset/loading/loading4.png';
  let imageSize = new kakao.maps.Size(35, 35);
  let markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
  
  // 새로운 마커 생성
  for (let i = 0; i < positions.length; i++) {
    let position = positions[i];
    let marker = new kakao.maps.Marker({
      map, // 마커를 표시할 지도
      position: new kakao.maps.LatLng(position.latitude, position.longitude), // 마커를 표시할 위치
      image: markerImage, // 마커 이미지
      clickable: true, // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정
    });
    let overlay = new kakao.maps.CustomOverlay({
      map,
      content: `<div class="infowindow">
      <div class="dday">D - ${getDday(positions[i].guideDate)}</div>
      <div class="wrapper">
        <div class="title">${positions[i].title}</div>
        <div  class="content">${
          positions[i].content.length > 20
            ? positions[i].content.slice(0, 20) + '...'
            : positions[i].content
        }</div>
      </div>
      </div>
      `,
      position: marker.getPosition(),
      xAnchor: 0.5,
      yAnchor: 0.02,
    });
    overlays[position.guideId] = overlay;
    overlay.setMap(null);
    kakao.maps.event.addListener(marker, 'mouseover', () => overlay.setMap(map));
    kakao.maps.event.addListener(marker, 'mouseout', () => overlay.setMap(null));
    kakao.maps.event.addListener(marker, 'click', () => clickMarker(positions[i].guideId));
    markers[position.guideId] = marker;
  }