모바일 유니앱 프로젝트에서 위치 전송을 위한 지도 상호작용을 구현하는 방법

uni-app의 모바일 단말기는 어떻게 WeChat을 모방하여 위치 전송의 지도 상호 작용을 실현할 수 있습니까? 다음 글에서는 지도 상호작용을 구현하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

회사의 새 프로젝트에는 지도가 내장되어 있어야 합니다. 아니면 기존 지도를 수정하고 새 지도를 만들어야 합니다. UI와 상호 작용은 WeChat과 일치해야 하며 기능은 비즈니스 요구 사항을 충족해야 합니다.

사실 이것은 매우 간단합니다. 가장 큰 문제는 아래 애니메이션 상호작용에 있습니다.

하지만 먼저 아쉬운 점을 이야기하자면, Tencent 지도 튜토리얼을 따라 프로젝트에 구축했습니다. 그러나 실제 머신에서 디버깅할 때 이 작업을 수행할 수 없다는 것을 알았습니다. 다시 변경해서 html로 작성하려고 프로젝트에서 webview를 통해 프로젝트에 도입합니다. webview引入到项目当中。

好了，希望读者引以为戒。

接下来说说这个交互的开发吧。

第一版试错

第一版的做法是利用uni-app的获取设备的宽高，地图宽度占满屏，内容与列表各占50%的高度，当触发展开列表时，调整高度占比并通过transition

알겠습니다. 독자들이 이것을 경고로 받아들였으면 좋겠습니다.

연결 이 상호작용의 발전에 대해 이야기해 봅시다.

첫 번째 버전의 시행착오

첫 번째 버전은 uni-app를 사용하여 기기의 너비와 높이를 얻는 것입니다. 콘텐츠와 목록이 각각 높이의 50%를 차지합니다. 목록이 확장되도록 트리거되면 높이 비율을 조정하고 transition 속성을 ​​통해 전환 효과를 추가합니다.

하지만 결과적으로 높이 비율을 자동으로 조정하면 높이 조정 값 자체가 과도해 애니메이션이 멈춘 것처럼 보입니다.

직접 말하면 딱 한 마디, 못생겼다.

ps: 다음 코드는 실제 실행 코드가 아닌 핵심 개념일 뿐이므로 의사 코드로 이해될 수 있습니다.

<template>
    <view>
      <view :style="{height: mapHeight + &#39;px&#39;}"> </view>
      <view :style="{height: windowHeight - mapHeight + &#39;px&#39;}"></view>
    </view>
</teamplate>

export default {
  data(){
    return {
        windowWidth: uni.getSystemInfoSync().windowWidth,
windowHeight: uni.getSystemInfoSync().windowHeight,
        searchStatus: false,
    }
  },
  computed{
    mapHeight(){
      return searchStatus ? this.windowHeight * 0.7 : this.windowHeight * 0.5;
    }
  }
}

<style scoped>
.map-box,
.result-list{
  transition: height .3s;
}
</style>

두 번째 버전의 아이디어

실제로 두 번째 아이디어를 읽어본 후; 버전, 정말 정신을 잃고 첫 번째 버전을 할까 생각도 했던 것 같아요.

두 번째 버전의 아이디어는 전반적으로 첫 번째 버전과 동일하며 둘 다 높이 조절이지만 차이점은 당신이 전진하고 내가 후퇴하는 전체적인 움직임이라는 것입니다.

1. 목록 컨테이너의 높이는 70%를 차지하고, 콘텐츠의 높이는 전체 높이의 50%를 차지합니다. 70%는 펼친 높이입니다.

2. 목록을 확장하면 지도가 10% 위로 이동하고 목록이 20% 위로 이동합니다.

높이를 조정하면 최종 애니메이션이 정지되었던 이전 버전과 비교하여 이 버전에서는 상위 값이 조정됩니다. .

지도 높이는 항상 50%이고, 목록을 확장하면 20%가 숨겨집니다.

목록의 높이는 항상 70%입니다. 확장 후 20% 위로 이동하면 지도의 추가 부분이 포함됩니다. 이때 지도 중앙 저장소는 변경되지 않습니다. 지도 중심점을 다시 획득할 필요가 없습니다.

<template>
    <view>
      <view :style="{height: windowHeight*0.5+&#39;px&#39;, top: searchStatus ? &#39;-10%&#39; : 0 }"> </view>
      <view :style="{height: windowHeight*0.7+&#39;px&#39;, top: searchStatus ? &#39;50%&#39; : &#39;30%&#39;}">
        <view :style="{height: searchStatus ? windowHeight*0.5+&#39;px&#39; :windowHeight*0.7+&#39;px&#39;}"></view>
      </view>
    </view>
</teamplate>

export default {
  data(){
    return {
        windowWidth: uni.getSystemInfoSync().windowWidth,
windowHeight: uni.getSystemInfoSync().windowHeight,
        searchStatus: false,
    }
  }
}

<style scoped>
.map-box,
.result-list{
  transition: height .3s;
}
</style>

마지막으로회사 프로젝트 코드는 프로젝트 주소를 올리기가 쉽지 않습니다. 전체 코드 중 이 부분이 정말 많아서 구현할 생각이 없다면 메시지를 남겨주시면 됩니다. 친절한 의사소통을 위해 댓글 영역에 연락처 정보를 추가하세요. 광고도 없고 비용도 없습니다.

🎜🎜원본 주소: https://juejin.cn/post/7054700579590766628🎜🎜🎜추천: "🎜uniapp tutorial🎜"🎜

위 내용은 모바일 유니앱 프로젝트에서 위치 전송을 위한 지도 상호작용을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!