UNiAPP はどのようにして Amap を描画するのですか?次の記事では、render.js の使い方を説明し、render.js を使用して uniAPP で Amap を描画する方法を紹介します。
renderjs
はビュー層で動作するjsです。 WXS よりも強力です。 app-vue と h5 のみをサポートします。 renderjs
には 2 つの主な機能があります:
##使用方法##スクリプト ノードの lang を renderjs# に設定します##
1 2 3 4 5 6 7 8 9 10 11 |
|
公式ドキュメント:
uniapp.dcloud.io/frame?id=re…uniAPP で render.js を使用して Amap を描画する
1 2 3 4 |
|
uni自これには比較的強力なマップ コンポーネントが付属していますが、多くの機能は vue ファイルでは制限されており、機能するには nvue ファイルで使用する必要があります。 この記事を書くにあたって、別の理由でnvueファイルが使えなかったので、他の方法を考えたり、マップ上にボタンをフローティングしたりする必要がありましたが、階層問題の解決も難しくて断念しました。ユニマップコンポーネント。
何度も試した結果、render.js を使用して Amap を呼び出すことにしました。これにより、上記のニーズと問題を完全に解決できるので、ここに記録して共有します。vue ページでは、主に render.js
render.js を使用します。以下の図に示すように、script タグが導入されます。
view はマップ表示に使用される render.js コンテナであり、マップの導入と初期化コードを に記述します。スクリプト タグ
マップの初期化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
|
Gaode について マップの具体的な使用方法については、Amap API を参照してください。
lbs.amap.com/api/javascr…通信render.js
##3. render.js の vue ページにデータを送信します
# 原理は同様です上記に render.js でメソッドをスローし、次のようにページ内でリッスンするメソッドを記述します。
1 2 3 4 5 6 7 8 9 |
|
1 2 3 4 |
|
https://uniapp.dcloud.io/frame?id=renderjs
https://lbs.amap.com /api/javascript-api/guide/abc/load"
推奨: "
uniapp チュートリアル
以上がrender.jsとは何ですか?それを使用して UNIAPP で Amap を描画するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。