本文介绍在uni-app中利用render.js绘制高德地图的方法。针对nvue限制及层级问题，通过render.js在视图层操作DOM并引入高德SDK，实现地图展示、标记点及连线功能。同时详解render.js与vue页面间通过callMethod进行数据通信的具体实现。
render.js的定义
renderjs是运行于视图层的JavaScript脚本，功能强于WXS，仅支持app-vue与H5平台。renderjs具备两大核心作用：
- 显著降低逻辑层与视图层的通信开销，提供高性能的视图交互能力
- 在视图层执行DOM操作，并运行适用于Web的JavaScript库
配置方法
将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. 地图上需要悬浮两个按钮 解决方案
UNiAPP内置map组件功能强大，但在Vue文件中功能受限，需在nvue文件中才能完全发挥。由于本次项目限制无法使用nvue文件，且需解决地图悬浮按钮的层级问题，故放弃内置组件。经多次尝试，最终选用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与高德地图内容请搜索本站历史文章或继续浏览后续相关文章，希望大家以后多多支持本站！