第UNiAPP中如何使用render.js繪制高德地圖目錄什么是render.js使用方式在uniAPP中使用render.js繪制高德地圖明確需求解決思路編寫代碼vue頁面使用render.js初始化地圖實現(xiàn)效果render.js中的通信1、數(shù)據(jù)的綁定2、數(shù)據(jù)的接收3、render.js中向vue頁面發(fā)送數(shù)據(jù)總結(jié)

什么是render.js

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

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

使用方式

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

viewid="test"/view

scriptmodule="test"lang="renderjs"

exportdefault{

mounted(){

//...

methods:{

//...

/script

官方文檔：uniapp.dcloud.io/frameid=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(typeofwindow.AMap==='function'){

this.initAmap()

}else{

//動態(tài)引入較大類庫避免影響頁面展示

constscript=document.createElement('script')

script.src='/mapsv=1.4.15key='+'你的key'

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

document.head.appendChild(script)

console.log('eles');

//初始化地圖

initAmap(){

this.map=newAMap.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){

letmarker=newAMap.Marker({

//經(jīng)緯度位置

position:newAMap.LngLat(item.longitude,item.latitude),

//便宜量

offset:newAMap.Pixel(-10,-24),

//圖標(biāo)

icon:newAMap.Icon({

//大小

size:newAMap.Size(20,25),

imageSize:newAMap.Size(20,25),

image:'imgpath'

//圖標(biāo)展示層級，防止被隱藏時編寫

zIndex:100,

//圖標(biāo)旁邊展示內(nèi)容

label:{

content:`viewcontent/view`,

offset:newAMap.Pixel(10,-18)

//給圖標(biāo)添加點擊事件

marker.on('click',(e)={

console.log(item，e);

//將圖標(biāo)添加到地圖中

this.map.add(marker)

//繪制點與點之間的線段Polyline類

initLine(start,end){

letpolyline=newAMap.Polyline({

//線段粗細

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

/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