UNiAPP怎么繪制高德地圖？下面本篇文章帶大家了解一下render.js的用法，介紹一下如何在uniAPP中使用render.js 繪制高德地圖，希望對大家有所幫助。

什么是render.js

renderjs是一個運行在視圖層的js。它比WXS更加強大。它只支持app-vue和h5。renderjs的主要作用有2個：

• 大幅降低邏輯層和視圖層的通訊損耗，提供高性能視圖交互能力
• 在視圖層操作dom，運行for web的js庫

使用方式

設(shè)置 script 節(jié)點的 lang 為 renderjs

<view id="test"></view> <script module="test">      export default {          mounted() {              // ...          },          methods: {         // ...         }     } </script>

官方文檔：uniapp.dcloud.io/frame?id=re…

在uniAPP中使用render.js 繪制高德地圖

明確需求

1. 在uni中的vue文件下使用地圖 2. 需要在地圖根據(jù)經(jīng)緯度標(biāo)記點，并且可點擊 3. 需要在標(biāo)記點與點之間連線 4. 地圖上需要懸浮兩個按鈕

解決思路

uni自帶的有map組件，功能還是比較強大，但是在vue文件下很多功能受限，必須在nvue文件中才能發(fā)揮出功能。
在本次編寫中因為其他原因無法使用nvue文件，所以不得不想其他方法，以及在地圖上懸浮按鈕，解決層級問題也是一個難點，所以放棄了uni的map組件。
最后多次嘗試后，選擇了使用render.js 來調(diào)用高德地圖，能夠完美解決上述需求和問題，特此記錄與分享。

編寫代碼

vue頁面使用render.js

render.js 主要是通過script標(biāo)簽引入，如下圖所示：

view就是一個render.js的容器，用于地圖展示，然后在script標(biāo)簽里面編寫地圖的引入與初始化代碼

初始化地圖

data(){     map:null,     myData:[], }, //以下是寫在methods中 //引入高德地圖SDK init(){     if (typeof window.AMap === 'function') {         this.initAmap()     } else {     // 動態(tài)引入較大類庫避免影響頁面展示     const script = document.createElement('script')     script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + '你的key'     script.onload = this.initAmap.bind(this)     document.head.appendChild(script)     console.log('eles');     } }, //初始化地圖 initAmap() {     this.map = new AMap.Map('amap', {         resizeEnable: true,         center: [this.myData[0].longitude,this.myData[0].latitude],         zooms: [4, 20], //設(shè)置地圖級別范圍         zoom: 18     })     this.map.on('complete',()=>{        console.log('加載完成');     })     this.getItem(this.myData) },  // 給地圖繪制點 Makers addMaker(item){     let marker = new AMap.Marker({             //經(jīng)緯度位置             position: new AMap.LngLat(item.longitude, item.latitude),             //便宜量             offset: new AMap.Pixel(-10, -24),             //圖標(biāo)             icon: new AMap.Icon({                 //大小                 size: new AMap.Size(20, 25),                  imageSize: new AMap.Size(20, 25),                 image:'imgpath'             }),             //圖標(biāo)展示層級，防止被隱藏時編寫             zIndex:100,             //圖標(biāo)旁邊展示內(nèi)容             label:{                 content:`<view>content</view>`,                 offset: new AMap.Pixel(10, -18)             }     })     //給圖標(biāo)添加點擊事件     marker.on('click', (e) => {         console.log(item，e);     })     //將圖標(biāo)添加到地圖中     this.map.add(marker) }, //繪制點與點之間的線段 Polyline類 initLine(start,end){     let polyline = new AMap.Polyline({         //線段粗細(xì)         strokeWeight:5,         //顏色         strokeColor:'#007AFF',         //形狀         lineCap:'round',         lineJoin:'round',         //是否顯示方向         showDir:true,         //起點與終點經(jīng)緯度[[longitudeStart,latitudeStart],[longitudeEnd,latitudeEnd]]         path:[start,end]     })     //向地鐵圖添加線段     this.map.add(polyline) },

實現(xiàn)效果

關(guān)于高德地圖的具體使用請參考高德API
lbs.amap.com/api/javascr…

render.js中的通信

render.js 所在的script標(biāo)簽和vue頁面的script標(biāo)簽是無法使用this進行數(shù)據(jù)通信的，必須通過其他方式進行通信，類似于vue中的組件傳值。

1、數(shù)據(jù)的綁定

2、數(shù)據(jù)的接收

3、render.js中向vue頁面發(fā)送數(shù)據(jù)

原理和上面差不多 在render.js中，拋出一個方法，然后在頁面中編寫該方法監(jiān)聽，具體如下

    //render.js      //向vue頁面拋出數(shù)據(jù)     sendMsg(){         this.$ownerInstance.callMethod('reciveMsg', '我是render.js的數(shù)據(jù)')     }     //針對頁面點擊或直接調(diào)用     sendMsg2(e,ownerInstance){         ownerInstance.callMethod('reciveMsg', '我是render.js的數(shù)據(jù)')     }

    //vue頁面接收數(shù)據(jù)     reciveMsg(data){        console.log(data) //我是render.js的數(shù)據(jù)     }

總結(jié)

render.js主要用于對DOM操作很頻繁的情況，如echarts的使用，地圖的使用等。

最后附上UNI官方鏈接和高德API鏈接
https://uniapp.dcloud.io/frame?id=renderjs
https://lbs.amap.com/api/javascript-api/guide/abc/load

推薦：《uniapp教程》