ホームページ > ウェブフロントエンド > uni-app > render.jsとは何ですか?それを使用して UNIAPP で Amap を描画するにはどうすればよいですか?

render.jsとは何ですか?それを使用して UNIAPP で Amap を描画するにはどうすればよいですか?

青灯夜游
リリース: 2021-08-26 19:39:09
転載
10349 人が閲覧しました

UNiAPP はどのようにして Amap を描画するのですか?次の記事では、render.js の使い方を説明し、render.js を使用して uniAPP で Amap を描画する方法を紹介します。

render.jsとは何ですか?それを使用して UNIAPP で Amap を描画するにはどうすればよいですか?

render.jsとは

renderjsはビュー層で動作するjsです。 WXS よりも強力です。 app-vue と h5 のみをサポートします。 renderjs には 2 つの主な機能があります:

  • ロジック層とビュー層の間の通信損失を大幅に削減し、高性能のビュー対話機能を提供します
  • 操作ビューレイヤー dom で、Web 用の js ライブラリを実行します

##使用方法##スクリプト ノードの lang を renderjs# に設定します##

1

2

3

4

5

6

7

8

9

10

11

<view id="test"></view>

<script module="test">

    export default {

        mounted() {

            // ...

        },

        methods: {

        // ...

        }

    }

</script>

ログイン後にコピー

公式ドキュメント:

uniapp.dcloud.io/frame?id=re…

uniAPP で render.js を使用して Amap を描画する

明確な要件

1

2

3

4

<strong>1. 在uni中的vue文件下使用地图

2. 需要在地图根据经纬度标记点,并且可点击

3. 需要在标记点与点之间连线

4. 地图上需要悬浮两个按钮</strong>

ログイン後にコピー

ソリューションのアイデア

uni自これには比較的強力なマップ コンポーネントが付属していますが、多くの機能は vue ファイルでは制限されており、機能するには nvue ファイルで使用する必要があります。 この記事を書くにあたって、別の理由でnvueファイルが使えなかったので、他の方法を考えたり、マップ上にボタンをフローティングしたりする必要がありましたが、階層問題の解決も難しくて断念しました。ユニマップコンポーネント。

何度も試した結果、render.js を使用して Amap を呼び出すことにしました。これにより、上記のニーズと問題を完全に解決できるので、ここに記録して共有します。



コードの記述

vue ページでは、主に render.js

render.js を使用します。以下の図に示すように、script タグが導入されます。

view はマップ表示に使用される render.js コンテナであり、マップの導入と初期化コードを に記述します。スクリプト タグ render.jsとは何ですか?それを使用して UNIAPP で Amap を描画するにはどうすればよいですか?

マップの初期化

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

data(){

    map:null,

    myData:[],

},

//以下是写在methods中

//引入高德地图SDK

init(){

    if (typeof window.AMap === &#39;function&#39;) {

        this.initAmap()

    } else {

    // 动态引入较大类库避免影响页面展示

    const script = document.createElement(&#39;script&#39;)

    script.src = &#39;https://webapi.amap.com/maps?v=1.4.15&key=&#39; + &#39;你的key&#39;

    script.onload = this.initAmap.bind(this)

    document.head.appendChild(script)

    console.log(&#39;eles&#39;);

    }

},

//初始化地图

initAmap() {

    this.map = new AMap.Map(&#39;amap&#39;, {

        resizeEnable: true,

        center: [this.myData[0].longitude,this.myData[0].latitude],

        zooms: [4, 20], //设置地图级别范围

        zoom: 18

    })

    this.map.on(&#39;complete&#39;,()=>{

       console.log(&#39;加载完成&#39;);

    })

    this.getItem(this.myData)

},

// 给地图绘制点 Makers

addMaker(item){

    let marker = new AMap.Marker({

            //经纬度位置

            position: new AMap.LngLat(item.longitude, item.latitude),

            //便宜量

            offset: new AMap.Pixel(-10, -24),

            //图标

            icon: new AMap.Icon({

                //大小

                size: new AMap.Size(20, 25),

                imageSize: new AMap.Size(20, 25),

                image:&#39;imgpath&#39;

            }),

            //图标展示层级,防止被隐藏时编写

            zIndex:100,

            //图标旁边展示内容

            label:{

                content:`<view>content</view>`,

                offset: new AMap.Pixel(10, -18)

            }

    })

    //给图标添加点击事件

    marker.on(&#39;click&#39;, (e) => {

        console.log(item,e);

    })

    //将图标添加到地图中

    this.map.add(marker)

},

//绘制点与点之间的线段 Polyline类

initLine(start,end){

    let polyline = new AMap.Polyline({

        //线段粗细

        strokeWeight:5,

        //颜色

        strokeColor:&#39;#007AFF&#39;,

        //形状

        lineCap:&#39;round&#39;,

        lineJoin:&#39;round&#39;,

        //是否显示方向

        showDir:true,

        //起点与终点经纬度[[longitudeStart,latitudeStart],[longitudeEnd,latitudeEnd]]

        path:[start,end]

    })

    //向地铁图添加线段

    this.map.add(polyline)

},

ログイン後にコピー
効果の達成

render.jsとは何ですか?それを使用して UNIAPP で Amap を描画するにはどうすればよいですか?Gaode について マップの具体的な使用方法については、Amap API を参照してください。

lbs.amap.com/api/javascr…


通信render.js

render.js が配置されている script タグと vue ページの script タグは、これをデータ通信に使用できません。コンポーネント値の転送と同様の他の方法で通信する必要があります。ビューで。

1. データ バインディング

render.jsとは何ですか?それを使用して UNIAPP で Amap を描画するにはどうすればよいですか?

2. データ受信

render.jsとは何ですか?それを使用して UNIAPP で Amap を描画するにはどうすればよいですか?##3. render.js の vue ページにデータを送信します

# 原理は同様です上記に render.js でメソッドをスローし、次のようにページ内でリッスンするメソッドを記述します。

1

2

3

4

5

6

7

8

9

<strong>    //render.js

    //向vue页面抛出数据

    sendMsg(){

        this.$ownerInstance.callMethod(&#39;reciveMsg&#39;, &#39;我是render.js的数据&#39;)

    }

    //针对页面点击或直接调用

    sendMsg2(e,ownerInstance){

        ownerInstance.callMethod(&#39;reciveMsg&#39;, &#39;我是render.js的数据&#39;)

    }</strong>

ログイン後にコピー

1

2

3

4

<strong>    //vue页面接收数据

    reciveMsg(data){

       console.log(data) //我是render.js的数据

    }</strong>

ログイン後にコピー

概要

render.js は主に DOM に使用されます。 eチャートの使用、マップの使用など、操作が非常に頻繁に行われる状況。

最後に、UNI 公式リンクと Amap API リンクを添付します

https://uniapp.dcloud.io/frame?id=renderjs

https://lbs.amap.com /api/javascript-api/guide/abc/load


推奨: "
uniapp チュートリアル

"

以上がrender.jsとは何ですか?それを使用して UNIAPP で Amap を描画するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート