高德地图-实现地图搜索点选位置功能
2024-05-16 10:02:56
高德地图-实现地图搜索点选位置功能
<!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" href="https://cache.amap.com/lbs/static/main1119.css"/><style>html,body{width: 100%;height: 100%;margin: 0px;}.info-title{font-weight: bolder;color: #fff;font-size: 14px;line-height: 26px;padding: 0 0 0 6px;background: #25A5F7}.info-content{padding: 4px;color: #666666;line-height: 23px;font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;}.info-content img{float: left;margin: 3px;}.amap-info-combo .keyword-input {height: auto;}.textbox {position: relative;border: 1px solid #D4D4D4;background-color: #fff;vertical-align: middle;display: inline-block;overflow: hidden;white-space: nowrap;margin: 0;padding: 3px;border-radius: 5px 5px 5px 5px;height: 28px; line-height: 28px;}.map_content {height:100%;margin-top: 45px;margin-bottom: 0px}.pt-btn {box-shadow: none; color:#aaa; display: inline-block; margin-bottom: 0; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; border-radius: 4px; padding: 5px 10px; font-size: 12px; line-height: 1.5; margin:4px 2px 4px 0;}.pt-btn-purple {background-color: #605ca8; border-color: #464293; color:#fff;}</style><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div style=" margin:5px 5px 5px 5px"><label>地址：</label><input id="address" class="textbox" type="text" style="width: 300px;"><button id="saveBtn" onclick="btnClick()" class="pt-btn pt-btn-purple">确认选择</button>
</div>
<div><div id="container" class="map_content" ></div><div id="myPageTop" style="margin-top: 45px; margin-right: 20px"><table><tr><td><label>请输入关键字：</label></td></tr><tr><td><input id="tipinput" class="textbox" style="width: 300px;"/></td></tr></table></div>
</div>
<script type="text/javascript">//地图加载var map = new AMap.Map("container", {resizeEnable: true,zoom: 13});//输入提示var autoOptions = {input: "tipinput"};var auto = new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({pageSize: 5,pageIndex: 1,citylimit: true,autoFitView: true }); //添加监听AMap.event.addListener(auto, "select", select);var allAddress;function select(e) {allAddress = e.poi.district;placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name, function(status, result) {//清除所有点标记map.clearMap(); var pois = result.poiList.pois;//生成点标记（覆盖物）for(var i = 0; i < pois.length; i++){var poi = pois[i];var marker = new AMap.Marker({map:map,icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b' + (i + 1) + '.png',position: poi.location, title: poi.name,clickable:true,animation:"AMAP_ANIMATION_DROP",extData:{id: i + 1,name: poi.name,address: allAddress + poi.address,type: poi.type,location: poi.location}});//设置点标记点击事件marker.on("click", showInfoMap);map.add(marker);}map.setFitView();}); }//显示信息窗体function showInfoMap(e){var lng = e.lnglat.lng;var lat = e.lnglat.lat;var extData = e.target.Ce.extData;var infoWindow = new AMap.InfoWindow({autoMove:true});infoWindow.setContent(createContent(extData.name, extData.address, extData.type));infoWindow.open(map, extData.location);var object = document.getElementById("address");object.value=extData.address;}function createContent(name, address, type) {var s = [];s.push('<div class="info-title">' + name + '</div><div class="info-content">' + "地址：" + address);s.push("类型：" + type);s.push('<div>');return s.join("<br>");}function btnClick() {var object = document.getElementById("address");alert(object.value);}
</script>
</body>
</html>
注意：代码需要修改开发的key为你自己申请的，具体流程直接去高德地图官网
高德地图-实现地图搜索点选位置功能相关推荐
- 高德地图实现仿qq,微信发送位置功能实现逻辑
定位获取当前位置 地图中间放置大头针 周边展示位置信息 周边信息点击后的逻辑操作 地图截屏功能实现 发送图片到其他页面或者服务器 获取到信息进行展示 写的不好,勿喷,有疑问可以联系我qq 130888 ...
- Android+SpringBoot+Vue+高德地图实现后台查看车辆实时位置功能
场景 通过给车辆的驾驶员的手机安装app,管理员在后台可以实时查看车辆的实时位置. 实现思路: app中集成高德地图,app启动登录后,定时地获取当前定位信息连同当前账号上传到服务器后台. 后台将获取 ...
- uview中使用_使用uniapp自带的地图_实现地图点选位置功能---基于Vue的uniapp手机端_前端UI_uview工作笔记006
使用uniapp提供的地图功能,不需要导入任何插件. https://uniapp.dcloud.io/component/map 这里也有uniapp地图的,官方说明. <template&g ...
- Android Studio百度地图仿QQ发说说选择位置功能
此功能实现也相对简单,主要是对百度地图的应用,以及Android基础的知识. 百度地图用到了定位功能和附近POI搜索功能. 效果图: 实现步骤.思路: 1.新建Android项目 2.创建AK. 打开 ...
- Android使用百度地图sdk，实现微信发送位置功能
1.效果如下: 2.主要代码 //拖动停止的时候,获取中心经纬度 mapView.map.setOnMapStatusChangeListener(object : BaiduMap.OnMapSta ...
- Android端地图,百度地图学习（II）-Android端的定位
哎,经历了小编的最近时间的研究,我的百度定位终于成功啦,刹那间觉得自己萌萌哒啦(-￣▽￣)- 话不多说,直接进入正题: 首先,我们来看一下效果: [分析定位原理] [编码分析] 2)增加布局信息:此处 ...
- 【Flutter】使用高德地图实现地图选点以及地图搜索
效果 插件安装以及环境配置 是使用amap_all_fluttify插件来完成的高德地图的集成 根据官方的说明,这个插件集成了amap_search_fluttify,amap_location_fl ...
- vue+高德地图实现地图搜索及点击定位
首先需要在index.html中引入高德地图的js链接,key需要换成你自己的key 最近有个需求是实现一个使用地图搜索定位的功能,在网上参考了下其他的文章,感觉不是很完善,自己整理了一下,可以实现点 ...
- 申请腾讯,高德,百度的地图位置服务密钥
由于工作的性质,需要用到这几种主流地图来进行开发, 下面介绍腾讯,高德,百度的地图位置服务密钥申请方式 腾讯地图:https://lbs.qq.com/webservice_v1/guide-geoc ...
最新文章
- 【PAT笔记】PAT中的散列思想
- int函数在Oracle,vb中int是什么意思 ?
- C风格字符串与C++风格字符串
- LeetCode刷题——整数反转
- php71+yum源+epel,搭建CentOS在线yum源镜像服务器
- pyspark若不能运行，需指定支持版本的java：os.environ[‘JAVA_HOME‘] = ‘F:\Java15.0.2‘
- 智能优化算法——遗传算法（C语言实现）
- php繁体类,PHP类UTF8编码内的繁简转换-繁体-简体
- n元均匀直线matlab,均匀直线阵天线的分析
- python下载百度文库文档
- Android 中的卡顿丢帧原因概述 - 低内存篇
- Tensorflow的基本概念与常用函数
- Vuetify Carouse轮播图 图片切换导致页面总是自动跳转到轮播图位置
- JMM——认识JMM
- L1-020 帅到没朋友(Python3)
- Android开发指南 1──应用程序基础
- 中英互译软件工程初步设计
- 在Adobe Acrobat DC中设置PDF单页连续
- 为什么TCP存在重传
- Java获取zip文件流