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

ユニアプリモバイル端末はどのように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>

最後に

会社のプロジェクト コードは、プロジェクト アドレスを投稿するのが簡単ではありません。完全なコードのこの部分はかなりの量です。実際に実装するアイデアがない場合は、コメント欄にメッセージを残すか、連絡先情報を追加してください。フレンドリーなコミュニケーション、広告なし、料金なし。

元のアドレス: https://juejin.cn/post/7054700579590766628

推奨: 「uniapp チュートリアル 」

以上がモバイルユニアプリプロジェクトで位置情報を送信するためのマップインタラクションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。