mPaaS-客户端开发组件-基于 H5 框架 - Kylin 框架之地址选择
Posted 水香木鱼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了mPaaS-客户端开发组件-基于 H5 框架 - Kylin 框架之地址选择相关的知识,希望对你有一定的参考价值。
定位:地址选择
工具:vscode 、mPaaS-客户端开发组件、基于H5框架-kylin、vue2.0
效果图:
<template>代码:
<van-field
readonly
clickable
label="地址"
input-align="right"
size="large"
placeholder="请选择地址"
required
v-model="search.map"
@click="ismap = true"
/>
<div id="iframe">
<iframe
class="map-item"
v-if="ismap"
id="getAddress"
@load="loadiframe"
:src="address"
style="
width: 100%;
height: 100%;
position: absolute;
z-index: 22222;
"
></iframe>
</div>
<script>代码:
data(){
return {
/*-------------高德地图-----------*/
latitude: '', //对应的经度3x.xxxxxx
longitude: '', //对应的维度1xx.xxxxxx
parameter3: '',
address: '',
ismap: false,
}
}
methods:{
loadiframe() {
let iframe = document.getElementById('getAddress').contentWindow
iframe.postMessage('hello', 'https://m.amap.com/picker/')
window.addEventListener(
'message',
function (e) {
console.log(e.data, '地图6666666')
if (e.data.command != 'COMMAND_GET_TITLE') {
//业务代码
// alert('您选择了:' + e.data.name + ',' + e.data.location)
console.log(e.data.name, '地图')
this.search.map = e.data.name
console.log(this.search.map, 'this.search.map')
this.ismap = false
}
}.bind(this),
false
)
},
1 /*高德*/
getlist() {
console.log('打印查看输入是否成功')
let that = this
AlipayJSBridge.call(
'fetxxxxxxx',//获取经纬度的方法,由于保密,这里不做展示
{
type: '0',
},
function (result) {
console.log(JSON.stringify(result.latitude), '经度')
console.log(JSON.stringify(result.longitude), '维度')
console.log(JSON.stringify(result), '000000000000000')
that.latitude = JSON.stringify(result.latitude)
that.longitude = JSON.stringify(result.longitude)
console.log(typeof that.latitude)
that.parameter3 =
JSON.stringify(result.longitude) +
',' +
JSON.stringify(result.latitude)
console.log(that.parameter3)
console.log(that.latitude, '11111111')
var aa = that.parameter3.replace(/\\"/g, '')
console.log(aa)
that.address =
'https://m.amap.com/picker/?keywords=写字楼,小区&zoom=15¢er=' +
aa +
'&radius=1000&total=20&key=您的高德key'
console.log(that.address)
console.log(that.latitude, that.longitude)
}
)
},
}
以上是关于mPaaS-客户端开发组件-基于 H5 框架 - Kylin 框架之地址选择的主要内容,如果未能解决你的问题,请参考以下文章