站長資訊網UNiAPP怎么繪制高德地圖？下面本篇文章帶大家了解一下render.js的用法，介紹一下如何在uniAPP中使用render.js 繪制高德地圖，希望對大家有所幫助。
什么是render.js
renderjs是一個運行在視圖層的js。它比WXS更加強大。它只支持app-vue和h5。renderjs的主要作用有2個：
- 大幅降低邏輯層和視圖層的通訊損耗，提供高性能視圖交互能力
- 在視圖層操作dom，運行for web的js庫
使用方式
設置 script 節點的 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. 需要在地圖根據經緯度標記點，并且可點擊 3. 需要在標記點與點之間連線 4. 地圖上需要懸浮兩個按鈕
解決思路
uni自帶的有map組件，功能還是比較強大，但是在vue文件下很多功能受限，必須在nvue文件中才能發揮出功能。
在本次編寫中因為其他原因無法使用nvue文件，所以不得不想其他方法，以及在地圖上懸浮按鈕，解決層級問題也是一個難點，所以放棄了uni的map組件。
最后多次嘗試后，選擇了使用render.js 來調用高德地圖，能夠完美解決上述需求和問題，特此記錄與分享。
編寫代碼
vue頁面使用render.js
render.js 主要是通過script標簽引入，如下圖所示：
view就是一個render.js的容器，用于地圖展示，然后在script標簽里面編寫地圖的引入與初始化代碼
初始化地圖
data(){ map:null, myData:[], }, //以下是寫在methods中 //引入高德地圖SDK init(){ if (typeof window.AMap === 'function') { this.initAmap() } else { // 動態引入較大類庫避免影響頁面展示 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], //設置地圖級別范圍 zoom: 18 }) this.map.on('complete',()=>{ console.log('加載完成'); }) 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:'imgpath' }), //圖標展示層級，防止被隱藏時編寫 zIndex:100, //圖標旁邊展示內容 label:{ content:`<view>content</view>`, offset: new AMap.Pixel(10, -18) } }) //給圖標添加點擊事件 marker.on('click', (e) => { console.log(item，e); }) //將圖標添加到地圖中 this.map.add(marker) }, //繪制點與點之間的線段 Polyline類 initLine(start,end){ let polyline = new AMap.Polyline({ //線段粗細 strokeWeight:5, //顏色 strokeColor:'#007AFF', //形狀 lineCap:'round', lineJoin:'round', //是否顯示方向 showDir:true, //起點與終點經緯度[[longitudeStart,latitudeStart],[longitudeEnd,latitudeEnd]] path:[start,end] }) //向地鐵圖添加線段 this.map.add(polyline) },
實現效果
關于高德地圖的具體使用請參考高德API
lbs.amap.com/api/javascr…
render.js中的通信
render.js 所在的script標簽和vue頁面的script標簽是無法使用this進行數據通信的，必須通過其他方式進行通信，類似于vue中的組件傳值。
1、數據的綁定
2、數據的接收
3、render.js中向vue頁面發送數據
原理和上面差不多 在render.js中，拋出一個方法，然后在頁面中編寫該方法監聽，具體如下
//render.js //向vue頁面拋出數據 sendMsg(){ this.$ownerInstance.callMethod('reciveMsg', '我是render.js的數據') } //針對頁面點擊或直接調用 sendMsg2(e,ownerInstance){ ownerInstance.callMethod('reciveMsg', '我是render.js的數據') }
//vue頁面接收數據 reciveMsg(data){ console.log(data) //我是render.js的數據 }
總結
render.js主要用于對DOM操作很頻繁的情況，如echarts的使用，地圖的使用等。
最后附上UNI官方鏈接和高德API鏈接
https://uniapp.dcloud.io/frame?id=renderjs
https://lbs.amap.com/api/javascript-api/guide/abc/load
推薦：《uniapp教程》
