首页vue3 @amap/amap-jsapi-loader 地图选点搜索高德地图

vue3 @amap/amap-jsapi-loader 地图选点搜索高德地图

时间: 2025-06-09 19:03:25 浏览: 38

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); }); ```

阅读全文