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)