vue2中使用高德地图实现搜索定位(一)
vue2项目中有用到高德地图,以此记录:
需求:搜索可定位地点
过程:在vue2项目运行起地图,在点图实现点标记(mark),搜索功能,切换标记
vue-amap官方文档地址: https://github.com/ElemeFE/vue-amap/
安装 amap:
1 | npm install vue-amap --save |
地图搭建:
main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import VueAMap from "vue-amap" Vue.use(VueAMap) VueAMap.initAMapApiLoader({ key: "xxxxxxxxxxxxxxx" , plugin: [ "AMap.Autocomplete" , //输入提示插件 "AMap.PlaceSearch" , //POI搜索插件 "AMap.Scale" , //右下角缩略图插件 比例尺 "AMap.OverView" , //地图鹰眼插件 "AMap.ToolBar" , //地图工具条 "AMap.Geolocation" , //定位控件,用来获取和展示用户主机所在的经纬度位置 "AMap.Geocoder" // 逆地理编码,通过经纬度获取地址所在位置详细信息 // 根据需求选用 ], uiVersion: "1.0" , // 地图ui版本 v : '1.4.4' // amap版本 }) |
vue文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | <template> <div class = "contain" > <el-amap-search-box class = "search-box" :search-option= "searchOption" :on-search-result= "onSearchResult" > </el-amap-search-box> <el-amap ref= "map" vid= "amapDemo" :center= "center" :zoom= "zoom" class = "amap-demo" > <el-amap-marker :position= "center" key= "100" ></el-amap-marker> </el-amap> <div v- if = "searchResult" > 搜索:{{content}},详细地址为:{{searchResult.locationName}},经度:{{searchResult.longitude}},纬度:{{searchResult.latitude}} </div> </div> </template> <script> export default { name: 'AMapDemo' , data() { return { zoom: 12, center: [118.02, 24.48], searchOption: { // 限制搜索城市的范围 citylimit: false }, content: '' , inputValue: '' , searchResult: { address: '' , latitude: '' , longitude: '' , name: '' , type: '' , country: '' , province: '' , city: '' , area: '' , township: '' , street: '' , neighborhood: '' , locationName: '' } } }, methods: { onSearchResult(pois) { //搜索 console.log(pois) let latSum = 0 let lngSum = 0 let that = this if (pois && pois.length > 0) { //如果长度为1则无需转化 let poi = pois[0] let lng = poi[ "lng" ] let lat = poi[ "lat" ] that.center = [lng, lat] that.zoom = 13 that.content = poi.name console.log(poi.name) that.searchResult.address = poi.address that.searchResult.latitude = poi.lat that.searchResult.longitude = poi.lng let geocoder = new AMap.Geocoder({}) geocoder.getAddress(that.center, function (status, result) { console.log(result) if (status === 'complete' && result.info === 'OK' ) { let obj = result.regeocode.addressComponent that.searchResult.locationName = obj.province + obj.city + obj.district + obj.township + obj.street + poi.address } }); } else { that.searchResult = [] } }, } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang= "scss" scoped> .amap-demo { width: 100%; height: 600px; position: relative; } .search-box { height: 35px; margin: 10px auto; width: calc(100% - 20px); // border-radius:16px; box-shadow: none; background: #ffff; border: 1px solid #e6e6e6; .search-box-wrapper { input { background: #fff; padding-left: 20px; } .search-btn { color: #2A67FE; width: 90px; height: 20px; box-sizing: border-box; border-left: 1px solid #D7D7D7; } } } </style> |
最终效果如下:
自此,高德地图完成部署,同时可搜索地点进行标记并且获取搜索点的经纬度.同时产生了新的功能需求:点击地图上的点,进行标记(mark)并且获取经纬度,下篇进行了记录
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章