Map坐标选择器

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<!-- 高德地图api更新必须配合安全密钥使用 -->
<script>
  window._AMapSecurityConfig = {
    securityJsCode: 'xxxxx',
  }
</script>
<script type="text/javascript" src='https://webapi.amap.com/maps?v=2.0&key=xxxxxxxx&plugin=AMap.PlaceSearch,AMap.Geocoder'></script>
<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.0.11"></script>

基础用法

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '坐标',
      prop: 'map',
      type: 'map'
    }
  ]
});
</script>

默认值

效果预览可直接操作下方示例

value属性可以提供一个初始化的默认值

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '坐标',
      prop: 'map',
      type: 'map',
      value: [113.10235504165291, 41.03624227495205, "内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒"]
    }
  ]
});
</script>

禁用状态

效果预览可直接操作下方示例

通过disabled属性指定是否禁用

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '坐标',
      prop: 'map',
      type: 'map',
      disabled: true
    }
  ]
});
</script>

高德参数

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  map: [113.10235504165291, 41.03624227495205, "内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒"]
});

const option = ref({
  column: [
    {
      label: '坐标',
      prop: 'map',
      type: 'map',
      mapChange: (params) => {
        console.log('高德回调参数', params);
      },
      params: {
        zoom: 10,
        zoomEnable: false,
        dragEnable: false,
      }
    }
  ]
});
</script>