最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

UNiAPP中如何使用render.js繪制高德地圖

 更新時間:2022年05月28日 10:14:50   作者:路遙思故人丶  
這篇文章主要介紹了UNiAPP中如何使用render.js繪制高德地圖,renderjs是一個運(yùn)行在視圖層的js。它比WXS更加強(qiáng)大。它只支持app-vue和h5,文中給大家提到了renderjs的主要作用,需要的朋友可以參考下

什么是render.js

renderjs是一個運(yùn)行在視圖層的js。它比WXS更加強(qiáng)大。它只支持app-vue和h5。 renderjs的主要作用有2個:

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

使用方式

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

<view id="test"></view>
<script module="test" lang="renderjs"> 
    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組件,功能還是比較強(qiáng)大,但是在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進(jìn)行數(shù)據(jù)通信的,必須通過其他方式進(jìn)行通信,類似于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…

lbs.amap.com/api/javascr…

到此這篇關(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+)

    這篇文章主要介紹了純javascript前端實現(xiàn)base64圖片下載(兼容IE10+),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • js實現(xiàn)的定時關(guān)閉頁面或定時提醒效果代碼

    js實現(xiàn)的定時關(guān)閉頁面或定時提醒效果代碼

    比較有創(chuàng)意的定時關(guān)閉頁面或定時提醒效果代碼
    2008-02-02
  • JavaScript自動內(nèi)存管理與垃圾回收策略詳細(xì)分析講解

    JavaScript自動內(nèi)存管理與垃圾回收策略詳細(xì)分析講解

    JS的垃圾回收機(jī)制是為了以防內(nèi)存泄漏,內(nèi)存泄漏的含義就是當(dāng)已經(jīng)不需要某塊內(nèi)存時這塊內(nèi)存還存在著,垃圾回收機(jī)制就是間歇的不定期的尋找到不再使用的變量,并釋放掉它們所指向的內(nèi)存。因為內(nèi)存的大小是有限的,所以當(dāng)內(nèi)存不再需要的時候,我們需要對其進(jìn)行釋放
    2023-01-01
  • layer.alert自定義關(guān)閉回調(diào)事件的方法

    layer.alert自定義關(guān)閉回調(diào)事件的方法

    今天小編就為大家分享一篇layer.alert自定義關(guān)閉回調(diào)事件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 在JavaScript中讓this保持正確的指向的解決方案

    在JavaScript中讓this保持正確的指向的解決方案

    這篇文章主要介紹了關(guān)于在 JavaScript 中如何讓 this 保持正確的指向的解決方案,文中給大家介紹了三種解決方案,使用閉包,使用箭頭函數(shù)和換綁 this這三種方法,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下
    2024-01-01
  • JS實現(xiàn)json的序列化和反序列化功能示例

    JS實現(xiàn)json的序列化和反序列化功能示例

    這篇文章主要介紹了JS實現(xiàn)json的序列化和反序列化功能,結(jié)合具體實例形式分析了javascript針對json的序列化與反序列化相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2017-06-06
  • js獲取電腦分辨率的思路及操作

    js獲取電腦分辨率的思路及操作

    用戶要求不同的分辨率,彈出窗口的位置不同,下面是本文的一些想法,并附有示例,喜歡的朋友可以收藏下
    2013-11-11
  • JavaScript中array.reduce()數(shù)組方法的四種使用實例

    JavaScript中array.reduce()數(shù)組方法的四種使用實例

    reduce為數(shù)組中的每一個元素依次執(zhí)行回調(diào)函數(shù),不包括數(shù)組中被刪除或從未被賦值的元素,下面這篇文章主要給大家介紹了關(guān)于JavaScript中array.reduce()數(shù)組方法的四種使用實例,需要的朋友可以參考下
    2022-07-07
  • 前端加密常用的幾種方式匯總

    前端加密常用的幾種方式匯總

    這篇文章主要介紹了前端加密常用的幾種方式,前端加密技術(shù)包括Base64編碼、哈希算法、對稱加密和非對稱加密,這些方法各有特點,適用于不同的場景,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2025-01-01
  • Bootstrap彈出框(Popover)被擠壓的問題小結(jié)

    Bootstrap彈出框(Popover)被擠壓的問題小結(jié)

    比較了下Bootstrap的popover和一些其它的開源項目,覺得Bootstrap的還算不錯。在使用過程中遇到了一系列問題,下面小編給大家分享Bootstrap彈出框(Popover)被擠壓的問題小結(jié),需要的朋友參考下吧
    2017-07-07

最新評論

遵化市| 开化县| 乌审旗| 云梦县| 高陵县| 满洲里市| 阿拉尔市| 乌海市| 昌图县| 乐亭县| 中卫市| 西安市| 海丰县| 新乡市| 定安县| 师宗县| 祁东县| 衢州市| 同德县| 咸丰县| 宁城县| 峨眉山市| 桂林市| 乾安县| 淮安市| 称多县| 湖北省| 沙洋县| 本溪| 嘉鱼县| 屏边| 张家界市| 阿城市| 元谋县| 扎赉特旗| 将乐县| 富平县| 盖州市| 紫金县| 治多县| 襄垣县|