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

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

以上是关于mPaaS-客户端开发组件-基于 H5 框架 - Kylin 框架之地址选择的主要内容,如果未能解决你的问题,请参考以下文章

mPaaS 服务端核心组件体系概述:移动 API 网关 MGS

移动端mPaaS-kylin入坑

移动端mPaaS-kylin入坑

mPaaS-技术干货 | Kylin 框架-组件

H5混合开发

mPaaS-RPC 拦截器各种场景下的使用指南