iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >UNiAPP中如何使用render.js绘制高德地图
  • 287
分享到

UNiAPP中如何使用render.js绘制高德地图

2024-04-02 19:04:59 287人浏览 独家记忆
摘要

目录什么是render.js使用方式在uniAPP中使用render.js 绘制高德地图明确需求解决思路编写代码Vue页面使用render.js初始化地图实现效果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" lang="renderjs"> 
    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链接
uniapp.dcloud.io/frame?id=re…

lbs.amap.com/api/javascr…

到此这篇关于UNiAPP中如何使用render.js绘制高德地图的文章就介绍到这了,更多相关render.js高德地图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: UNiAPP中如何使用render.js绘制高德地图

本文链接: https://www.lsjlt.com/news/150027.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • UNiAPP中如何使用render.js绘制高德地图
    目录什么是render.js使用方式在uniAPP中使用render.js 绘制高德地图明确需求解决思路编写代码vue页面使用render.js初始化地图实现效果render.js中...
    99+
    2024-04-02
  • vue3中如何使用高德地图api
    本篇内容介绍了“vue3中如何使用高德地图api”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!前置工作在开发之前我们需要了解 vue3 中接...
    99+
    2023-07-05
  • uniapp使用高德地图的超详细步骤
    目录1、项目前准备2、页面创建引入3、地图实现js4、地图实现单点标记5、地图实现终点与起点标记6、最后 上代码~总结1、项目前准备 1.1、首先你需要去申请一个属于自己的高德地图k...
    99+
    2022-12-08
    uniapp高德地图导航 uniapp使用高德地图 微信小程序高德地图
  • vue项目中如何使用高德地图
    这篇文章主要介绍“vue项目中如何使用高德地图”,在日常操作中,相信很多人在vue项目中如何使用高德地图问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目中如何使用高德地图”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-05
  • uniapp上高德(百度)地图API的使用(APP安卓)
    前言 由于在app中没有document,window等对象,所以使用在pc端传统方法引入的方式,将会发现无法引用成功,会出现白屏现象。 目前有两种解决方式: 使用uniapp的web-view方式(百度地图) 使用renderjs...
    99+
    2023-10-12
    uni-app 百度api 高德api renderjs webview Powered by 金山文档
  • uniapp小程序如何使用高德地图api实现路线规划
    今天小编给大家分享一下uniapp小程序如何使用高德地图api实现路线规划的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。路线...
    99+
    2023-07-04
  • 如何在Python中使用folium绘制地图
    这期内容当中小编将会给大家带来有关如何在Python中使用folium绘制地图,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。一、简介folium 建立在 Python 生态系统的数据应用能力和 Leafl...
    99+
    2023-06-15
  • 在vue3项目中如何使用新版高德地图
    这篇文章主要讲解了“在vue3项目中如何使用新版高德地图”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“在vue3项目中如何使用新版高德地图”吧!1. 首先你要注册好账号登录2. 获取key和...
    99+
    2023-07-05
  • Vue如何接入高德地图
    这篇“Vue如何接入高德地图”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue如何接入高德地图”文章吧。Vue接入高德地图...
    99+
    2023-07-02
  • 如何使用Uniapp绘制横线
    在Uniapp中想要绘制一条横线并不难,通过一些简单的代码就可以实现绘制横线的操作。如果你想学习如何使用Uniapp绘制横线,请跟随本文学习。一、使用CSS绘制横线我们可以通过在标签中使用CSS来绘制横线。通过以下代码片段,我们可以轻松地在...
    99+
    2023-05-14
  • Vue如何开发高德地图应用
    这篇文章主要为大家展示了“Vue如何开发高德地图应用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue如何开发高德地图应用”这篇文章吧。异步加载因为使用 js sdk 应用,脚本文件本身体积很...
    99+
    2023-06-20
  • Uniapp中如何使用谷歌地图
    随着移动应用的兴起,越来越多的开发者选择使用跨平台开发框架来编写应用程序。Uniapp是一种目前比较流行的跨平台开发框架,可以在Android、iOS、Web等多个平台上部署应用。同时,谷歌地图是一种广泛使用的地图应用程序,然而,许多开发者...
    99+
    2023-05-14
  • 如何使用angular9+echarts绘制3D地图
    这篇文章主要介绍如何使用angular9+echarts绘制3D地图,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!新建一个angular9的工程安装了@angular-cli的脚手架ng -v查看版本ng new m...
    99+
    2023-06-14
  • vue如何使用原生高德地图你知道吗
    1、先在vue项目根目录下新建vue.config.js,这个文件是没有的,vue不提供 module.exports = { configureWebpack: { ex...
    99+
    2024-04-02
  • vue接入高德地图绘制扇形效果的案例详解
    目录vue接入高德地图绘制扇形需求预想效果代码实现绘制基站第一步绘制基站第二步 - 计算扇形形状计算扇形坐标扇区点击事件原点点击事件vue接入高德地图绘制扇形 为什么又写这一篇呢,主...
    99+
    2024-04-02
  • vue如何利用openlayers加载天地图和高德地图
    这篇文章给大家分享的是有关vue如何利用openlayers加载天地图和高德地图的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、天地图部分1、在vue中安装openlayersnpm i -...
    99+
    2023-06-25
  • vue怎么使用原生高德地图
    本篇内容主要讲解“vue怎么使用原生高德地图”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么使用原生高德地图”吧!1、先在vue项目根目录下新建vue.config.js,这个文件是没有...
    99+
    2023-06-29
  • 在node中如何使用koa框架调用高德地图接口
    在node中如何使用koa框架调用高德地图接口,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。高德开放平台调高德接口我们最重要需...
    99+
    2024-04-02
  • 聊聊vue3中怎么使用高德地图api
    首先安装包并引入npm i @amap/amap-jsapi-loader --saveimport AMapLoader from '@amap/amap-jsapi-loader'使用官方介绍的方式进行加vue2 和 v...
    99+
    2023-05-14
    前端 Vue.js 数据可视化
  • 如何使用python绘制世界人口地图
    这篇文章主要介绍“如何使用python绘制世界人口地图”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何使用python绘制世界人口地图”文章能帮助大家解决问题。数据来源:population_da...
    99+
    2023-07-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作