高德地图Amap搜索定位

最新推荐文章于 2024-07-23 15:55:45 发布

Zdelta

最新推荐文章于 2024-07-23 15:55:45 发布

阅读量1.9k

点赞数

分类专栏：前端文章标签：高德地图 web定位地图搜索 js定位 webAPI

本文链接：https://blog.csdn.net/Zdelta/article/details/87087618

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文档介绍如何在web应用中结合高德地图API实现搜索提示和定位功能。通过引入高德地图的JavaScript库，实现了用户输入时的搜索建议，并且详细说明了当用户选择下拉框中的一个位置后如何进行地图定位。

摘要由CSDN通过智能技术生成

在前一篇的基础上加入了搜索提示，和通过搜索定位

前文：

https://blog.csdn.net/Zdelta/article/details/87072653

加入搜索：

1，引入js

//引入高德地图API,多个插件用逗号分隔
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=开发者key&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"></script>

<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

2，js:



//搜索
var autoOptions = {
    input: "partyPlace"//前端搜索框
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
    map: map
}); 
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
function select(e) {
    placeSearch.setCity(e.poi.adcode);
    placeSearch.search(e.poi.name);  //关键字查询查询
}

3,效果：

搜索提示：