mPaaS-客户端开发组件-基于 H5 框架 - Kylin 框架之地址选择

Posted 2021-10-18 水香木鱼

定位:地址选择

工具：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&center=' +
            aa +
            '&radius=1000&total=20&key=您的高德key'

          console.log(that.address)
          console.log(that.latitude, that.longitude)
        }
      )
    },
}