モバイルユニアプリプロジェクトで位置情報を送信するためのマップインタラクションを実装する方法-uni-app-php.cn

モバイルユニアプリプロジェクトで位置情報を送信するためのマップインタラクションを実装する方法

青灯夜游

リリース： 2022-02-07 18:09:19

転載

3989 人が閲覧しました

ユニアプリモバイル端末はどのようにWeChatを模倣して、位置情報を送信するための地図インタラクションを実装しますか?マップインタラクションの実装方法については、次の記事で紹介していますので、ご参考になれば幸いです。

モバイルユニアプリプロジェクトで位置情報を送信するためのマップインタラクションを実装する方法

会社の新しいプロジェクトにはマップが組み込まれている必要があります。または、古いマップを修正して、新しいマップを UI とインタラクションの点で WeChat に合わせる必要があります。ビジネスニーズに機能的に適合します。

実際には、これらは非常に単純ですが、主な問題は以下のアニメーションの相互作用にあります。

最初に反省しておきますが、Tencent のマップチュートリアルに従ってプロジェクトに組み込んだところ、ブラウザでのプレビューは正常でしたが、実機でデバッグしてみると、これはできないので、もう一度変更する予定です。プロジェクトに HTML を記述し、webview を通じてプロジェクトに導入します。

さて、読者の皆様にはこれを警告として受け取っていただければ幸いです。

モバイルユニアプリプロジェクトで位置情報を送信するためのマップインタラクションを実装する方法

このインタラクションの発展について話しましょう。

試行錯誤の最初のバージョン

最初のバージョンは、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>

ログイン後にコピー

第 2 版突然の気まぐれ

実際、第 2 バージョンのアイデアを読んだ後、私は本当に正気を失って、最初のバージョンでそれを実行したかったと感じるでしょう。

2 番目のバージョンのアイデアは最初のバージョンとほぼ同じで、両方とも高さを調整していますが、違いは、あなたが前進し、私が後退するという全体的な動きであることです。

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>

ログイン後にコピー