高德地图关于搜索后marker点击事件
简介:功能说明:输入内容后高德地图会出现一些地点提示,提示后涉及两方面,一是你选择提示的地点进行搜索定位。二是点击软键盘上的搜索进行定位。定位后都会出现很多个定位点在地图上,这时候用户会选择图上的定位点。
1.按照提示进行定位

2.点击软键盘上的搜索进行定位,
无论哪一种方式,地图上都会出现多个marker,但是用户会去选择想要的定位点。
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 | // 搜索查询 输入提示 function searchPosition() { AMap.plugin([ 'AMap.Autocomplete' , 'AMap.PlaceSearch' ], function () { var markers = {}; var autoOptions = { // city: "北京", //城市,默认全国 input: "tipInput" //使用联想输入的input的id }; autocomplete = new AMap.Autocomplete(autoOptions); var placeSearch = new AMap.PlaceSearch({ // city: '北京', map: map }) AMap.event.addListener(autocomplete, "select" , function (e) { //TODO 针对选中的poi实现自己的功能 placeSearch.setCity(e.poi.adcode); placeSearch.search(e.poi.name); // 根据地址转化经纬度 railCenter = [e.poi.location.lng, e.poi.location.lat]; }); AMap.event.addListener(autocomplete, "click" , function (e) { //TODO 针对选中的poi实现自己的功能 placeSearch.setCity(e.poi.adcode); placeSearch.search(e.poi.name); // 根据地址转化经纬度 railCenter = [e.poi.location.lng, e.poi.location.lat]; }); var pointMark; // AMap.event.addListener(autocomplete,"keypress",function(e){ $( '#tipInput' ).on( 'keypress' , function (e) { if (e.keyCode == '84' || e.keyCode == '13' ) { var text = $( this ).val(); // placeSearch.setCity(e.poi.adcode); placeSearch.search(text, function (status, result) { console.log(status, result) if (status == 'complete' && result.info == 'OK' ) { railCenter = [result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat]; pointMark = result.poiList.pois; // for(var i=0;i<data.length;i++){ // markers[i]= ([data[i].location.lng,data[i].location.lat]); // } // markers = result.poiList; } }); $( '.amap-sug-result' ).hide(); // 根据地址转化经纬度 // railCenter = [e.poi.location.lng,e.poi.location.lat]; // alert(e.keyCode) } // alert(e) }); AMap.event.addListener(placeSearch, 'markerClick' , function (e) { railCenter = [e.data.location.lng, e.data.location.lat]; }) }); } |
细节决定成败
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)