smsb-web-develop/src/components/dialog/CoordinateDialog/index.vue

<template>
  <confirm-dialog
    ref="confirmDialg"
    title="坐标拾取"
    v-bind="$attrs"
    @confirm="onConfirm"
  >
    <div class="c-grid-form u-align-self--center">
      <span class="c-grid-form__label">来源</span>
      <schema-select
        v-model="info.type"
        :schema="typeSelectSchema"
      />
      <span class="c-grid-form__label" />
      <div class="c-grid-form__option">
        <div class="l-flex--row c-sibling-item--v">
          <span class="c-sibling-item c-grid-form__label u-required">经度</span>
          <el-input
            v-model.trim="info.longitude"
            class="c-sibling-item u-width--xs"
            placeholder="-180 ~ +180"
            maxlength="13"
          />
          <span class="c-sibling-item far c-grid-form__label u-required">纬度</span>
          <el-input
            v-model.trim="info.latitude"
            class="c-sibling-item far u-width--xs"
            placeholder="-90 ~ +90"
            maxlength="12"
          />
        </div>
        <a
          class="c-sibling-item--v nearer o-link"
          href="https://lbs.amap.com/tools/picker"
          target="_blank"
        >
          高德地图拾取器（需登录提升精度）
        </a>
        <a
          class="c-sibling-item--v nearer o-link"
          href="http://api.map.baidu.com/lbsapi/getpoint/index.html"
          target="_blank"
        >
          百度地图拾取器
        </a>
      </div>
    </div>
  </confirm-dialog>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'CoordinateDialog',
  data () {
    return {
      info: {},
      typeSelectSchema: {
        options: [
          { value: 'gd', label: '高德' },
          { value: 'baidu', label: '百度' },
          { value: 'gps', label: 'GPS' }
        ]
      }
    }
  },
  methods: {
    show (data) {
      this.info = {
        type: 'gd',
        longitude: '',
        latitude: '',
        ...data
      }
      AMapLoader.load({
        key: process.env.VUE_APP_GAODE_MAP_KEY,
        version: '2.0',
        plugins: ['']
      }).then(AMap => {
        this.$map = AMap
      })
      this.$refs.confirmDialg.show()
    },
    onConfirm (done) {
      if (!this.info.longitude) {
        this.$message({
          type: 'warning',
          message: '请填写经度'
        })
        return
      }
      if (!this.info.latitude) {
        this.$message({
          type: 'warning',
          message: '请填写纬度'
        })
        return
      }
      if (this.info.type === 'gd') {
        this.$emit('confirm', {
          value: {
            longitude: this.info.longitude,
            latitude: this.info.latitude
          },
          done
        })
      } else {
        if (!this.$map) {
          this.$message({
            type: 'warning',
            message: '转换坐标失败，请关闭后重试'
          })
          return
        }
        this.$map.convertFrom([this.info.longitude, this.info.latitude], this.info.type, (status, result) => {
          console.log('coordinate', result)
          if (result.info === 'ok') {
            this.$emit('confirm', {
              value: {
                longitude: result.locations[0].lng,
                latitude: result.locations[0].lat
              },
              done
            })
          } else {
            this.$message({
              type: 'warning',
              message: '转换坐标失败，请稍后重试'
            })
          }
        })
      }
    }
  }
}
</script>