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

什么是render.js

renderjs是一个作业在视图层的js。它比WXS更加健旺。它只支撑app-vue和h5。
renderjs的首要效果有2个:

  • 大幅下降逻辑层和视图层的通讯损耗,供应高性能视图交互才干
  • 在视图层操作dom,作业for wehttp://www.baidu.comb的js库

运用方法

设置 script 节点的 lang 为 renderjs

<vieapproachw id="test"&ahttps和http的差异mp;https域名gt;</view>
<script modulelement翻译eehttps和http的差异lements="test"java语言 lang="renderjs">
export default {
mounted() {
// .HTTP.. 
}element什么意思,
methelementuiods: {
/elements/ ...
}
}
</script>

官方文档:uniapp.dclelement翻译oud.io/frame?id=re…

在uniAPP中运用rendhttp 500er.js 制作高德地图

清楚需求

1. 在uni中的vuejava面试题文件下运用地图
2. 需求在地图根据经纬度appearance符号javascript点,而且https协议application可点击
3. 需求在符号点与点之间连线
4. 地图上需求悬浮两个按钮

处理思路

uni自带的有map组件,功app下载用仍是比较健旺,但是在vue文件下许多功https安全问题用受app下载限,有必要在nvue文件中才干发挥出功用。
在本次编写中因为其他原因无法apple运用nvue文件,所以不得不想其他方法,以及在地图上悬浮按钮,处理层级问题也是一个难点,所以扔掉了uni的map组件。
终究多次检验后,选择了运用rendhapp下载ttpjava开发 404er.js 来调用高德地图,能够完美处hhttps和http的差异ttp 302理上述需求和问题,特此记载与共享。

https安全问题http 302代码

vue页面运用renelementsder.js

render.js 首要是经过approachscript标签引进,如下图所示:

UNiAPP中运用render.js制作高德地图

view就是一个reAPPnder.js的容器,用appear于地图展示,然后在script标签java开发里面编写地图的java言语引进与初始化代码

初始java怎样读化地图

data(){
map:null,
myData:element结构[],
},
//以下是写在meelement翻译thods中
//引进高德地图SDappointmentK
init(){
if (typeof window.AMjava模拟器ap === 'function') {
this.initAmap()
}https和http的差异 else {
// 动态引进较大类库避免影响页面展示
cojaappleva面试题nst script = document.createElement('script')
scJavaript.src = 'httphttp 302s://webapi.amap.com/maps?v=1.4.15https安全问题&key=' + '你的key'
script.onload = this.initAmap.bind(thishttpclient)
document.head.appendChild(script)
console.log('eles');
}
},
//初http署http 302始化地图
initAmap() {
this.map = new AMap.Map('amap', {
resizeEnable: true,
center: [this.myData[0].longitude,this.myData[0].latitude],
zohttp署理oms: [4, 20], //设置地图等级规划
zoom: 18
})
this.map.on('complete',()=>{
console.logelemhttp 404entary是什么意思('加载结束');
})
this.getIhttp 302tem(this.mhttps域名yData)
},
// 给地APP图制作点 Makers
addMaker(item){
let mjava环境变量装备arker = new AMap.Marhttpwatchker({
//经纬度方位
position: new AMap.LngLat(itehttps和http的差异m.lonjava模拟器gitude, item.latitujava初学de),
//廉价量
offset: new AMap.Pixel(-10, -24),
//图标
icon:java面试题 new AMap.Icon({
//大小
size: new AappleMap.Size(20, 25),
ihttpclientmageSize: new AMap.Sizappeare(20, 25),
image:'imgpath'
})elemelementary怎样读英语entui,
//图标展示层级,避免http署理被躲藏时编写
zIndexHTTP:100,
//图标周围展示内容
labelapprove:{
cjava难学吗ontent:`<view>contapplicationent</view>http 404`,
offset:https域名 new AhttpclientMap.Pixel(10, -18)
}
})
//给图标增加点击作业
mappleapplicationarker.on('click', (e) =&gappreciHTTPatet; {
consoleHTTP.log(item,e);
})
//将图Element标增加到地图中
thappstoreijava言语s.map.addhttps和http的差异(marker)
},
//制作点appreciaHTTPte与点之间的线段 Polyline类
initLine(start,end){
let pappleolyline = new AMap.Polyline({
//线段粗细
strokeWeight:5,
//颜http 404
strokeColJavaor:'#007JavaAFF',
//形状
lineCap:'round',
lihttpsElement和http的差异neJoin:'round',
//是否显现方向
showDir:true,
//起点与结束经纬度[[longitudeelementuiStart,lajhttps安全问题ava言语titudeStart],[longitudeEnd,latitudeEnhttp署理d]]
path:elemejava就业培训班nt是什么牌子[start,end]
})
//向地铁图增加线段
this.map.add(polylinehttpclient)
},application

结束效果

UNiAPP中运用render.js制作高德地图

关于高德地http://www.baidu.com图的详细运用请参happearancettpclient考高德API
lbs.amap.com/api/javascr…

render.jappstores中的java难学吗通讯

render.js 地址的script标签和vue页面的script标签是无法运用this进行数据通讯的,有必要经过其他方法进行通讯,类似https协议appointmentvue中的appreciate组件传值。

1、数据的绑定

UNiAPP中运用render.js制作高德地图

2、数据的接纳

UNiAPP中运用render.js制作高德地图

3、render.js中向vue页面发送数据

原理和上面差不多
在render.js中,抛出一个方法,然后在页面httpclienthttp://www.baidu.com编写该方法监听,详细如下

    //render.js 
//向vue页面抛出数据
sendMsg(){HTTP
this.$ownerjava初学Instance.chttps域名allMethod('rappstoreeciveMsg'elementary怎样读英语, '我是render.jhttp://whttp 404wwelement什么意思.baidu.coms的数据')
}
//针对页面点击或直接http://www.baidu.com调用
sendMsgHTTPS2(e,ownerInstance){
ownerInstance.callMethod('reciveMhttp://192.168.1.1登录sg',elementary怎样读英语 '我是renderhttps和http的差异.js的数据')
}
    //vue页面接纳数据
recelementary怎样读英语iveMsg(data){
console.log(data) //我是render.js的数据
}

总结

render.js首要用于对DOM操作很频频的状况,如echarts的运用,地图的运用等。
终究httpclient附上UNI官方链接和java面试题高德API链接
uniappelementui.dcloudhttps域名.io/frame?id=re…
lbs.amaelementsp.com/api/approvejavascr…

发表评论

提供最优质的资源集合

立即查看 了解详情