# MapInput 地图选择器

agel-map-input 组件是基于 el-input el-dialog el-autocomplete AMap AMap.PlaceSearch AMap.Autocomplete AMap.Geocoder 的封装组件,高德地图 JSAPI 的加载 (opens new window)

# 使用

value 支持 array string 两种类型,区别在于是否包含经纬度信息。

点击查看代码
<template>
  <div class="demo border">
    <el-row type="flex" style="margin-bottom:10px;">
      <el-col :span="4">经纬度地址:</el-col>
      <agel-map-input v-model="lnglat" editable></agel-map-input>
    </el-row>
    <el-row type="flex">
      <el-col :span="4">纯文本地址:</el-col>
      <agel-map-input v-model="address"></agel-map-input>
    </el-row>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      lnglat: ["重庆市洪崖洞民俗风貌区", 106.579125, 29.562283],
      address: "重庆市洪崖洞民俗风貌区",
    };
  },
};
</script>

不管是使用 JSAPI Loader 还是 CDN 方式,首先要确认 AMap 及对应的插件正确的被引用,组件默认是取 Window.AMap,若你想按需加载高德地图,可使用 AMap 属性。

<template>
  <agel-map-input :AMap="mapLoader"></agel-map-input>
</template>
 
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  methods: {
    mapLoader(reslove) {
      AMapLoader.load({
       // map key
        key: "xxxxxxxx",   
        // 所需要插件列表,若是2.0高德地图,Autocomplete 改成 AutoComplete
        plugins: ["AMap.PlaceSearch", "AMap.Autocomplete", "AMap.Geocoder"],
      }).then((AMap) => reslove(AMap));
    },
  },
};
</script>

# MapInput Attributes

属性 类型 默认值 说明
value Array/String [] 绑定值
AMap Function (cb)=> cb(Window.AMap) AMap Loader
keywordSearch Boolean true 是否可关键字检索
clearable Boolean false 是否可清空
editable Boolean false 是否可编辑
destroyDialogOnClose Boolean false dialog 关闭时是否销毁

支持 el-input 属性,事件,插槽 (opens new window)