uniapp
中使用腾讯地图api
,首先从接口获取到一些参数之后,需要通过src
的地址将一些参数传递下去
由于web-view
只加载第一次的初始路径,当loc
改变时,web-view
中获取不到loc
的改变,并不会再刷新
首先在template中先写上html的本地路径
1 2 3 4 5
| <template> <view class="map-container"> <web-view :src="`../../hybrid/html/map.htmlloc=${JSON.stringify(loc)}`" ref="wv" @message="getMessage"></web-view> </view> </template>
|
考虑使用web-view
的loadURL(url)方法,将参数传递下去
由于uni
的打包问题,此处写的相对路径在运行时会提示找到文件
此时可以使用web-view
的getURL
获取到html的绝对路径
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| onReady() { let wv, _this = this uni.getSystemInfo({ success(res) { const currentWebview = _this.$scope.$getAppWebview() const userToken = uni.getStorageSync(USER_SESSION_TOKEN_KEY) _this.getLocacation(function (loc) { const url = currentWebview.children()[0].getURL() // 获取 webview 的绝对路径 let newUrl = url.replace(/loc={.*?}/, `loc=${JSON.stringify(loc)}`) // 正则替换 获取到的经纬度 loc newUrl = `${newUrl}&statusBarHeight=${res.statusBarHeight}&token=${userToken}&compass=comRes` // 拼接其他参数 setTimeout(function () { wv = currentWebview.children()[0] // 获取当前的 webview wv.loadURL(newUrl) // 加载新地址 }, 1000) }) } }) }
|