# 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 关闭时是否销毁 |