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, '广东省广州市'],

Vue3 中,`@amap/amap-jsapi-loader` 是一个用于加载高德地图 JavaScript API 的脚手架或组件库。它简化了在 Vue 项目中集成高德地图的过程,使得地图功能如定位、地图展示和选点搜索变得更加方便。 在 Vue 项目中,要实现在地图上进行选点和搜索,你需要首先安装 `@amap/amap-jsapi-loader` 和相关的依赖,然后在组件中按照以下步骤操作: 1. **引入并配置地图API**: ```javascript import { loadAMapApiLoader } from '@amap/amap-jsapi-loader'; loadAMapApiLoader({ key: 'your_amap_key', // 替换为你自己的高德地图 API 密钥 plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch'], // 需要的插件列表 callback: amap => { this.map = new AMap.Map('containerId', { zoom: 10, // 初始缩放级别 center: [116.404, 39.915], // 北京坐标 }); } }); ``` 2. **添加Autocomplete插件支持选点搜索**: ```html <div id="containerId"></div> ``` ```javascript const autocomplete = new AMap.Autocomplete({ input: 'searchInput', // 输入框ID location: map.getCenter(), // 选点初始位置 city: '', // 如果需要城市筛选,可以设置city属性 nearbyCity: '', // 如果需要附近城市筛选,可以设置nearbyCity属性 }).on('select', event => { map.setZoom(14); map.setCenter(event.poi.location); }); ``` 3. **添加PlaceSearch插件进行地点搜索**: ```javascript const placeSearch = new AMap.PlaceSearch({ map: this.map, searchWord: '公园', // 搜索关键字 }).search(); placeSearch.on('complete', result => { console.log(result); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值