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" lang="renderjs">
export default {
mounted() {
// ...
},
methods: {
// ...
}
}
</script>在uniAPP中使用render.js 繪制高德地圖
明確需求
1. 在uni中的vue文件下使用地圖 2. 需要在地圖根據(jù)經(jīng)緯度標記點,并且可點擊 3. 需要在標記點與點之間連線 4. 地圖上需要懸浮兩個按鈕
解決思路
uni自帶的有map組件,功能還是比較強大,但是在vue文件下很多功能受限,必須在nvue文件中才能發(fā)揮出功能。
在本次編寫中因為其他原因無法使用nvue文件,所以不得不想其他方法,以及在地圖上懸浮按鈕,解決層級問題也是一個難點,所以放棄了uni的map組件。
最后多次嘗試后,選擇了使用render.js 來調(diào)用高德地圖,能夠完美解決上述需求和問題,特此記錄與分享。
編寫代碼
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 {
// 動態(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),
//圖標
icon: new AMap.Icon({
//大小
size: new AMap.Size(20, 25),
imageSize: new AMap.Size(20, 25),
image:'imgpath'
}),
//圖標展示層級,防止被隱藏時編寫
zIndex:100,
//圖標旁邊展示內(nèi)容
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,
//起點與終點經(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標簽和vue頁面的script標簽是無法使用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ù)
}
復(fù)制代碼總結(jié)
render.js主要用于對DOM操作很頻繁的情況,如echarts的使用,地圖的使用等。
最后附上UNI官方鏈接和高德API鏈接
uniapp.dcloud.io/frame?id=re…
到此這篇關(guān)于UNiAPP中如何使用render.js繪制高德地圖的文章就介紹到這了,更多相關(guān)render.js高德地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
純javascript前端實現(xiàn)base64圖片下載(兼容IE10+)
這篇文章主要介紹了純javascript前端實現(xiàn)base64圖片下載(兼容IE10+),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
js實現(xiàn)的定時關(guān)閉頁面或定時提醒效果代碼
比較有創(chuàng)意的定時關(guān)閉頁面或定時提醒效果代碼2008-02-02
JavaScript自動內(nèi)存管理與垃圾回收策略詳細分析講解
JS的垃圾回收機制是為了以防內(nèi)存泄漏,內(nèi)存泄漏的含義就是當(dāng)已經(jīng)不需要某塊內(nèi)存時這塊內(nèi)存還存在著,垃圾回收機制就是間歇的不定期的尋找到不再使用的變量,并釋放掉它們所指向的內(nèi)存。因為內(nèi)存的大小是有限的,所以當(dāng)內(nèi)存不再需要的時候,我們需要對其進行釋放2023-01-01
layer.alert自定義關(guān)閉回調(diào)事件的方法
今天小編就為大家分享一篇layer.alert自定義關(guān)閉回調(diào)事件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript中array.reduce()數(shù)組方法的四種使用實例
reduce為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù),不包括數(shù)組中被刪除或從未被賦值的元素,下面這篇文章主要給大家介紹了關(guān)于JavaScript中array.reduce()數(shù)組方法的四種使用實例,需要的朋友可以參考下2022-07-07
Bootstrap彈出框(Popover)被擠壓的問題小結(jié)
比較了下Bootstrap的popover和一些其它的開源項目,覺得Bootstrap的還算不錯。在使用過程中遇到了一系列問題,下面小編給大家分享Bootstrap彈出框(Popover)被擠壓的問題小結(jié),需要的朋友參考下吧2017-07-07

