可直接复制，踩坑以及解决方法，成功版本）uniapp H5地图选点经纬度，地址详细信息

<template>
<view>
  <view class="cu-form-group">
  <view class="title">详细地址<text class="text-red">*</text></view>
  <input placeholder="请输入详细地址" name="input" v-model="form.address"></input>
  <text class='cuIcon-locationfill text-orange' @tap="MAPxuan">地图定位</text>
  <web-view v-if="panDuan" ref='map'
      :src="'https://apis.map.qq.com/tools/locpicker?search=1&type=1&coordtype=1&coord='+ form.longitude+','+ form.latitude +'&key=你的key&referer=你的key名称'">
        </web-view>
  </view>
</view>
</template>
<script>
  export default {
  created() {
    var _this = this
    window.addEventListener('message', function(event) {
    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    var loc = event.data;
    if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      console.log('location', loc);//在这里输出全部信息经纬度以及信息
      _this.form.address = loc.poiaddress + loc.poiname
      _this.form.longitude = loc.latlng.lng
      _this.form.latitude = loc.latlng.lat
      _this.panDuan = false
    }
    }, false);
  },
  data() {
    return {
    panDuan: false,//通过这个来让地图组件显示或者隐藏
    form: {
      address: '',
      longitude: '', //经度
      latitude: '' //纬度
    }
    }
  },
  methods: {
    MAPxuan() {
    var _this = this
    uni.getLocation({
      isHighAccuracy: true,
      success(res) {
      console.log(res)
      _this.form.longitude = res.longitude
      _this.form.latitude = res.latitude
      _this.panDuan = !_this.panDuan
      },
      fail(err) {
      uni.showToast({
        title: '频繁定位失败，请重试',
        icon: 'none'
      })
      }
    })
    },
  }
  }
</script>
<style>
</style>