高德地图web 输入提示+地图选点
2024-04-20 00:12:54
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>高德地图</title>
</head>
<body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script><body style="background:#f9f9f9; margin:0 auto"><div class="map" style="float: left;"><div id="container" style="height: 557px;width: 100%"></div><div id="myPageTop"><table><tr><td><label>请输入关键字：</label></td></tr><tr><td><input id="tipinput"/></td></tr></table></div><div class="input-card" style='width:28rem;'><label style='color:grey'>地理编码，根据地址获取经纬度坐标</label><div class="input-item"><div class="input-item-prepend"><span class="input-item-text" >地址</span></div><input id='address' type="text" value='' ></div><div class="input-item"><div class="input-item-prepend"><span class="input-item-text">经纬度</span></div><input id='coordinate' value="" disabled type="text"></div><input id="regeo" type="button" class="btn" value="搜索" /></div>
</div>
</body><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--引入高德地图JSAPI -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key值&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"></script>
<!--引入UI组件库（1.0版本） -->
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js" ></script>
<script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js" ></script>
<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<script type="text/javascript">var map = new AMap.Map("container", {resizeEnable: true});//输入提示var autoOptions = {input: "tipinput"};var auto = new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map});//点击地图上的点标记AMap.event.addListener(placeSearch,"markerClick",function(e) {$('#coordinate').val(e.data.location);$('#address').val(e.data.name);});//构造地点查询类AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name); //关键字查询查询}var geocoder = new AMap.Geocoder({city: "全国", //城市设为北京，默认：“全国”});var marker = new AMap.Marker();map.getAllOverlays();var marker = new AMap.Marker();function regeoCode() {var lnglat = document.getElementById('coordinate').value.split(',');map.add(marker);marker.setPosition(lnglat);geocoder.getAddress(lnglat, function(status, result) {if (status === 'complete'&&result.regeocode) {var address = result.regeocode.formattedAddress;document.getElementById('address').value = address;}else{log.error('根据经纬度查询地址失败')}});}map.on('click',function(e){document.getElementById('coordinate').value = e.lnglat;regeoCode();})document.getElementById("regeo").onclick = regeoCode;document.getElementById('coordinate').onkeydown = function(e) {if (e.keyCode === 13) {regeoCode();return false;}return true;};</script></body>
</html>实现效果
高德地图web 输入提示+地图选点相关推荐
- 百度地图-地理位置输入提示
百度地图-地理位置输入提示 在做一些地点检索或者行程推荐的系统时,往往需要用户对地址信息进行输入,此时如果有智能化的输入提示根据用户的输入而进行相关的地理位置名称推送就会大大提示系统的使用流畅性.但如 ...
- vue调用百度地图API输入提示示例下拉列表一直被触发问题
2019独角兽企业重金招聘Python工程师标准>>> 先看图 然后点确定,居然下拉框又被触发了,而且在添加页面各种输入框只要一输入文字就会触发地图下拉框展示,很恶心的一个bug,不 ...
- 腾讯地图 - 关键词输入提示（结尾附视频）
一.功能介绍 关键词输入提示接口可以用于获取输入关键字的补完与提示,帮助用户快速输入.可以通过配合前端程序实现Autocomplete(自动完成)的效果. 二.密钥申请 1. 用户登录 打开腾讯位置服 ...
- 百度地图 web 只显示地图
在public的index中写 <script type="text/javascript" src="https://api.map.baidu.com/gets ...
- html编写可缩放地图,web页面实现地图展示，可缩放，标点并点击---使用高德地图...
/*初始化数据*/ function initData() { var list = [];for (var i = 0; i < 3; i++) { list.push({ number: 0 ...
- Vue 高德地图 输入提示和POI搜索插件结合使用 拾取对应地点坐标
1.准备好高德地图的key和安全密钥jscode,key的平台类型是Web 端 ( JSAPI ). 2.注意:自2021年12月02日升级,升级之后所申请的 key 必须配备安全密钥 jscode ...
- 高德地图：输入关键字提示匹配信息(AMap.Autocomplete)
h5我想做一个地图---输入关键字提示匹配信息,点击要选择的信息获取该位置的信息,如图所示功能: 点击上图所示的----重庆西站(地铁站),出现如下图所示: 打印出如图地理位置信息: 本个页面功能代码 ...
- 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文地址为: [高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址 ...
- Android高德地图的使用,狠详细!手把手!(地图+定位+逆地理编码+输入提示+Poi搜索)
最近项目用到高德地图,因此来写一篇文章理一下高德的使用步骤方法,希望对大家有用! ##1.注册+配置 废话不多说,要使用高德地图首先要去高德开放平台注册成为开发者(http://lbs.amap.co ...
最新文章
- PHP5 VC9、VC6、Thread Safe、Non Thread Safe各个版本区别
- 目标板挂载NFS方法及错误解决
- 《STL源码剖析》学习--traits
- ALV OO的栏位属性
- elasticsearch 基本配置
- 获取系统URL访问的前三名（通过Scala方式实现/通过Spark方式实现），Spark将URL访问日志进行分类并通过自定义Partitioner的方式将文件写入到不同分区上
- 在VS2010里可以给JS函数添加代码提示\注释
- 剑指offer之二叉树的下一个结点
- 未来计划让儿子和他爷爷出国游一次
- SQLAlchemy 简单笔记
- VB.NET工作笔记015---vb.net获取cpu使用率,内存使用率_未能找到具有指定类别名“Processor”、计数器名“% Processor Time”的性能计数
- java redis教程视频_2020年Java视频教程-Redis全集
- 神经网络编程的34个案例,人工神经网络编程内容
- Hopcroft-Carp(有点难）
- 计算机数控入门,数控车床入门教程 如何进入CNC加工过程
- python索引右往左_Python字符串从左到右索引默认0开始的,最大范围是字符串长度少1...
- 移动应用测试篇（1）——移动应用的发展
- Hi3559A 开发环境搭建
- sequoia负载均衡
- 美国29岁女科学家凯蒂·博曼，基于图像算法拼接人类第一张黑洞照片！！