avue-input-map高德地图简单搜索(vue项目)

配置:

 在index.html配置如下,key 直接去高德地图申请即可

<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.11&key=自己的key值&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.PolyEditor'></script>
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

在vue文件

<avue-input-map :params="params" placeholder="请选择地图" v-model="mapform"></avue-input-map>

【1】data中的配置如下

zooms:地图显示的缩放级别范围,在PC上,默认范围[3,18],取值范围[3-18];在移动设备上,默认范围[3-19],取值范围[3-19]

dragEnable:地图是否可通过鼠标拖拽平移。

zoomEnable:地图是否可缩放

mapform数组:[经度,纬度,地址]

params: {
        zoom: 15,
        zoomEnable: true,
        dragEnable: false,
      },
mapform: [113, 23, '广东省广州市'],

  • 7
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中使用JSX和高德地图搜索功能,需要先安装amap和amap-jsapi-loader两个库,可以使用以下命令: ``` npm install amap amap-jsapi-loader ``` 安装完成后,可以在Vue组件中使用ElAutocomplete组件来实现搜索功能。首先,在组件中导入所需的库: ```jsx import { defineComponent, ref } from 'vue' import { ElAutocomplete } from 'element-plus' import { Loader } from '@amap/amap-jsapi-loader' import AMap from 'amap' ``` 然后,在组件的setup函数中初始化AMap和Loader,并创建一个ref来保存搜索结果: ```jsx setup() { const result = ref([]) const loader = new Loader({ key: 'your amap key', version: '2.0', plugins: [] }) const initAMap = async () => { const AMapInstance = await loader.load() const map = new AMapInstance.Map('map-container') const search = new AMapInstance.PlaceSearch({ map: map, pageSize: 10, pageIndex: 1, city: '全国' }) const searchCallback = (status, result) => { if (status === 'complete' && result.info === 'OK') { result.value = result.poiList.pois.map((poi) => poi.name) } } const handleSearch = (value) => { search.search(value, searchCallback) } } initAMap() return { result } } ``` 在initAMap函数中,首先通过Loader加载AMap库和插件,然后创建一个地图和一个PlaceSearch对象,用于搜索地点。在搜索回调函数中,将搜索结果转换为一个数组,保存在result ref中。 接下来,在ElAutocomplete组件中,将result ref作为数据源,使用handleSearch函数来触发搜索: ```jsx return { setup() { const result = ref([]) const loader = new Loader({ key: 'your amap key', version: '2.0', plugins: [] }) const initAMap = async () => { const AMapInstance = await loader.load() const map = new AMapInstance.Map('map-container') const search = new AMapInstance.PlaceSearch({ map: map, pageSize: 10, pageIndex: 1, city: '全国' }) const searchCallback = (status, result) => { if (status === 'complete' && result.info === 'OK') { result.value = result.poiList.pois.map((poi) => poi.name) } } const handleSearch = (value) => { search.search(value, searchCallback) } } initAMap() return { result, handleSearch } }, render() { return ( <div> <ElAutocomplete value={this.value} placeholder="请输入地址" fetchSuggestions={this.handleSearch} popper-class="amap-autocomplete" v-slots={{ dropdown: ({ item }) => ( <div class="amap-item"> <i class="el-icon-map-location"></i> {item} </div> ) }} onInput={(value) => (this.value = value)} onSelect={(value) => (this.value = value)} /> </div> ) } } ``` 在ElAutocomplete组件中,使用fetchSuggestions属性来绑定handleSearch函数,触发搜索操作,并将搜索结果显示在下拉列表中。同时,使用v-slots属性来自定义下拉列表中的每个选项,将搜索结果的图标和名称显示出来。在输入框的onInput和onSelect事件中,分别保存用户输入的值和选择的值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值