高德地图：输入关键字提示匹配信息(AMap.Autocomplete)

h5我想做一个地图---输入关键字提示匹配信息，点击要选择的信息获取该位置的信息，如图所示功能：

点击上图所示的----重庆西站(地铁站)，出现如下图所示：

打印出如图地理位置信息：

本个页面功能代码如下：使用高德的 AMap.Autocomplete构造函数

<!doctype html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>浏览器定位</title><link rel="stylesheet" type="text/css" href="../assets/css/mui.min.css" /><link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" /><style type="text/css">.mui-bar {background-color: #1BCBBE;}.mui-pull-left,.mui-title {color: #fff;}html,body,#container {width: 100%;height: 100%;}#container {margin-top: 12%;height: 93%;}.info {position: absolute;left: 0;right: 0;top: 44px;width: 100%;display: flex;background-color: #1BCBBE;justify-content: center;align-items: center;height: 60px;}#keyword {border-radius: 30px;font-size: 14px;width: 80%;height: 40px;margin-bottom: 0;}#result1 {width: 80%;margin: auto;height: 100px;margin-top: 104px;}</style><body><header class="mui-bar mui-bar-nav"><span class="index-left"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a></span><h1 class="mui-title">搜索地址</h1></header><div id='mui-content'><div id="container"></div><div class="info autoclass"><input id='keyword' type="text" placeholder="请输入关键字" name="keyword"></div><div id="result1" class="autobox" name="result1"></div></div><script src="../assets/js/mui.min.js" type="text/javascript" charset="utf-8"></script><script src="../assets/js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=高德创建的web端key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script><script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script><script type="text/javascript">$.ajaxSetup({async: false});//地图加载var map = new AMap.Map("container", {resizeEnable: true});//输入提示var autoOptions = {input: "keyword"};var auto = new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map}); //构造地点查询类AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发AMap.event.addListener(auto, "error", onError); //注册监听，当选中某条记录时会触发//解析定位正确信息function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name); //关键字查询查询var info = e.poi;//地理信息console.log(info)}//解析定位错误信息function onError(data) {console.log("定位失败")mui.alert(data.info)}</script></body></html>

主要调用的js和css为：

js引入：
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=高德创建web端的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>css引入:
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />

高德地图：输入关键字提示匹配信息(AMap.Autocomplete)相关推荐

高德地图2----输入提示、关键字查询
我们在使用地图的时候经常会用到搜索地址并定位到该地址,高德的POI搜索:AMap.Autocomplete根据输入关键字提示匹配信息,可将Poi类型和城市作为输入提示的限制条件.用户可以通过自定义回调 ...
Vue 高德地图输入提示和POI搜索插件结合使用拾取对应地点坐标
1.准备好高德地图的key和安全密钥jscode,key的平台类型是Web 端 ( JSAPI ). 2.注意:自2021年12月02日升级,升级之后所申请的 key 必须配备安全密钥 jscode ...
vue高德地图实现关键字搜索
高德地图准备工作安装amap cnpm国内安装比npm更快些: cnpm install vue-amap --save main.js 配置amap的基础配置项 import GaodeMap f ...
VUE3+Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind
踩坑记录:最近项目中用到了@vuemap/vue-amap高德地图组件,正常配置完成后,引入官方示例,地图正常出现,可以正常编译不出错,但是代码提示给我整了个这. 于是,开始查资料,为什么会出现这个情 ...
python获取高德地图POI——关键字搜索
本文主要内容是利用python获取高德地图上的感兴趣点(POIs). 高德开放平台:https://lbs.amap.com/ 下载POI分类编码和城市编码表搜索POI相关文档:https://lb ...
在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)
首先注册登陆高德地图 https://lbs.amap.com/ 划过头像里面有个应用管理点开进入到应用管理打开我的应用选择创建应用然后按照要求填写内容,切记一定要选择web端(JS API) ...
高德地图准确获取当前位置信息
代码示例 JavaScript mapObj = new AMap.Map('iCenter'); mapObj.plugin('AMap.Geolocation', function () {geo ...
Vue Cli4 使用高德地图定位获取当前经纬度信息以及周边定位
以上是最终效果图下面开始代码分享第一步在index,html引入高德地图模块 ` <script type="text/javascript ...
vue项目中使用高德地图获取用户当前位置信息
项目背景是用vue开发的小程序,需要获取当前用户的地理位置,折腾了好久终于弄好了,今天分享给大家,话不多说,let's go! 第一步:在index.html页面引入高德地图 <script t ...

高德地图：输入关键字提示匹配信息(AMap.Autocomplete)

高德地图：输入关键字提示匹配信息(AMap.Autocomplete)相关推荐

最新文章

热门文章