高德地图Amap搜索定位

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

前文：

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,效果：

搜索提示：

点击下拉框中的一项时，定位过去：

高德地图Amap搜索定位相关推荐

vue中PC端使用高德地图 -- 实现搜索定位、地址标记、弹窗显示定位详情
PC端高德地图使用步骤: 1.注册并登录高德开放平台获取 2.安装高德依赖(amap-jsapi-loader) 3.初始化地图 4.首次打开地图获取当前定位并标记 5.根据已有地址自动定位到指定地址 ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
Android实现高德地图POI搜索
效果图如下: 导入高德地图的搜索服务包到工程的libs目录中,并配置好权限与用户KEY. 权限如下: <uses-permission android:name="android.pe ...
关于ArcGis for javascript整合百度地图天地图高德地图进行搜索
1.ArcGis for javascript整合百度地图搜索 1.1.首先引入百度地图的api 1  2 <script type=" ...
十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【二、创建地图】
十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示[二.创建地图] 在template标签内创建下列DOM 1.在template标签内,创建container的 ...
HTML5接入百度地图并搜索定位
首先我们得去百度那里注册一下,拥有自己的Appkey,连接:http://lbsyun.baidu.com/ 也可以使用别人的,当然最好还是自己去注册比较好. 第二步,在你自己的网页中引入: 下面直接 ...
007：Mapbox GL实现地图地点搜索定位功能
第007个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中实现地图地点搜索定位功能直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果文章目录示例效果配 ...
高德地图怎么搜索marker_2018-07-06 高德地图搜索定位，滑动地图显示周边信息，根据地址搜经...
emmmm,效果图先行(搜索定位以及自由滑动地图展示周边位置信息,根据点击的位置获取经纬度) aa.gif 主要代码package com.dydd.wsp.dreamtree.ui.mapimpor ...
高德地图--SDK集成--定位功能地图定位搜索
最近项目需要到高德定图定位,就此记录下简单集成思路下载文件之只放了libs和主要代码文件 https://download.csdn.net/download/qq_38355313/1035261 ...

高德地图Amap搜索定位

加入搜索：

高德地图Amap搜索定位相关推荐

最新文章

热门文章