高德地图输入关键字搜索后选择并获取地址

您所在的位置：网站首页 › 高德地图怎么定位搜索 › 高德地图输入关键字搜索后选择并获取地址

高德地图输入关键字搜索后选择并获取地址

2024-03-24 13:00| 来源: 网络整理| 查看: 265

由于最近有网站选择定位获取地址的需求，花了点时间，参考高德地图官方例子以及Api文档，简单实现了一个小Demo。打算总结一下遇到的问题，方便以后二度开发。

HTML代码：

map .custom-input-card { width: 18rem; } .custom-input-card .btn:last-child { margin-left: 1rem; } .content-window-card { position: relative; width: 23rem; padding: 0.75rem 0 0 1.25rem; box-shadow: none; bottom: 0; left: 0; } .content-window-card p { height: 2rem; } 请输入关键字：

html页面主要提供简单的样式，这里我使用了官方的样式，也可以根据需要自己增加或修改。

重点在于JS部分，也就是上面引入的js文件。

首先我们需要注册一个高德地图的账号，然后在控制台添加一个自己的应用，并添加Key。

这里我们使用JS异步加载AMap：

function onApiLoaded() { var map = new AMap.Map('container', { center: [104.065724, 30.657433],//地图中心位置坐标 zoom: 11,//图层数级 resizeEnable: true }); } var url = 'https://webapi.amap.com/maps?v=1.4.10&key=申请的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.MouseTool,AMap.Geocoder&callback=onApiLoaded'; //plugin后面是我们要用到的组件，多个组件用逗号分隔 var jsapi = document.createElement('script'); jsapi.charset = 'utf-8'; jsapi.src = url; document.head.appendChild(jsapi);

接下来是我们需要使用的一些组件的实例：

//ToolBar map.plugin(["AMap.ToolBar"], function () { map.addControl(new AMap.ToolBar()); }); if (location.href.indexOf('&guide=1') !== -1) { map.setStatus({ scrollWheel: false }) } //坐标-地址转换 var geocoder = new AMap.Geocoder({ }); //输入提示 var autoOptions = { input: "tipinput" }; //搜索框自动完成 var auto = new AMap.Autocomplete(autoOptions); //构造地点查询类 var placeSearch = new AMap.PlaceSearch({ });

接下来是查询，搜索事件的绑定以及弹窗：

//输入提示 var autoOptions = { input: "tipinput" }; var auto = new AMap.Autocomplete(autoOptions); var placeSearch = new AMap.PlaceSearch({ }); //构造地点查询类，注意：这里如果实例的时候设置了map，下面再自定义增加marker时，会导致marker点重复和相关的marker设置失效。 AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发 function select(e) { placeSearch.setCity(e.poi.adcode); placeSearch.setCityLimit(true); placeSearch.search(e.poi.name, searchBack); //关键字查询查询 }; //查询事件回调 function searchBack(status, result) { // 查询成功时，result即对应匹配的POI信息 var pois = result.poiList.pois; for (var i = 0; i < pois.length; i++) { var poi = pois[i]; var marker = []; //创建marker marker[i] = new AMap.Marker({ //map: map, position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组 title: poi.name }); //绑定鼠标点击事件——弹出信息窗口 marker[i].on('click', function (res) { openInfo(res); }); map.add(marker[i]); } map.setFitView(); } //在指定位置打开信息窗体 function openInfo(e) { geocoder.getAddress(e.lnglat, function (status, result) { if (status === 'complete' && result.regeocode) { //地址 var address = result.regeocode.formattedAddress; //邮编 var adcode = ""; if (result.regeocode.addressComponent.adcode) { adcode = result.regeocode.addressComponent.adcode; } //构建信息窗体中显示的内容 var info = []; info.push("

邮编 : " + adcode + "

"); info.push("

地址 :" + address + "

"); info.push('')//可以根据自己需要，将获取到POI信息进行传递 infoWindow = new AMap.InfoWindow({ content: info.join("") //使用默认信息窗体框样式，显示信息内容 }); infoWindow.open(map, e.lnglat); } else { alert(JSON.stringify(result)) } }); }

大概流程就这么多，开始做的时候还是遇到了一些坑，如果有什么疑问的地方，可以留言大家探讨。

（ps：第一次写博客，写的不好的地方请大家见谅。。。）

【本文地址】

高德地图输入关键字搜索后选择并获取地址

高德地图输入关键字搜索后选择并获取地址

今日新闻

推荐新闻