高德地图根据名称搜索坐标，坐标点呈现列表展示

效果展示

话不多说，直接上代码

<!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/main.css"/><script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=你自己从高德地图上申请的Key值"></script><style type="text/css">body {font-size: 12px;}#tip {background-color: #ddf;color: #333;border: 1px solid silver;box-shadow: 3px 4px 3px 0px silver;position: absolute;top: 10px;right: 10px;border-radius: 5px;overflow: hidden;line-height: 20px;}#tip input[type="text"] {height: 25px;border: 0;padding-left: 5px;width: 280px;border-radius: 3px;outline: none;}/* 经纬度 */.ll{background-color: #ddf;color: #333;border: 1px solid silver;box-shadow: 3px 4px 3px 0px silver;position: absolute;bottom: 10px;right: 10px;border-radius: 5px;overflow: hidden;line-height: 20px;}.ll input[type="text"] {height: 25px;border: 0;padding-left: 5px;width: 280px;border-radius: 3px;outline: none;}#panel {position: absolute;background-color: white;max-height: 90%;overflow-y: auto;top: 50px;right: 10px;width: 280px;}</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="panel"></div>
<div id="tip"><input type="text" id="keyword" name="keyword" value="请输入关键字：(选定后搜索)" onfocus='this.value=""'/>
</div>
<div class="ll"><input type="text" id="lnglat" name="lnglat" value="经度,纬度" disabled/>
</div>
<script type="text/javascript">var windowsArr = [];var marker = [];var map = new AMap.Map("mapContainer", {resizeEnable: true,center: [116.397428, 39.90923],//地图中心点zoom: 13,//地图显示的缩放级别keyboardEnable: false});AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){var autoOptions = {city: "天津", //城市，默认全国input: "keyword"//使用联想输入的input的id};autocomplete= new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({city:'天津',map:map,panel: "panel"})AMap.event.addListener(autocomplete, "select", function(e){//TODO 针对选中的poi实现自己的功能console.log(e)placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name,function(status, result){if (status === 'complete' && result.info === 'OK') {//TODO : 解析返回结果,如果设置了map和panel，api将帮助完成点标注和列表console.log(result)}})});//小点   点击事件AMap.event.addListener(placeSearch, "markerClick", function(e){console.log(e.data.location);//当前marker的经纬度信息document.getElementById("lnglat").value = e.data.location.lng + ',' + e.data.location.lat;})// 右上角列表点击事件 AMap.event.addListener(placeSearch, "listElementClick", function(e){console.log(e.data.location);//当前marker的经纬度信息document.getElementById("lnglat").value = e.data.location.lng + ',' + e.data.location.lat;})});
</script><script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>
</html>

记得更换key值，如果需要使用vue的话只需要双绑对应的v-model 经纬度值即可。

高德地图根据名称搜索坐标，坐标点呈现列表展示相关推荐

java aoi 服务器地图_GitHub - WanZixin/getShp: 利用高德地图web服务API获取坐标串，生成行政区和aoi的shp文件...
爬取数据生成shp文件 1.功能简介共有两大功能,一个功能是根据高德地图web服务API获取行政区划坐标串,写入行政区shp文件:另一个功能是根据高德地图的接口获取poi坐标串,写入aoi(area ...
python获取高德地图POI——关键字搜索
本文主要内容是利用python获取高德地图上的感兴趣点(POIs). 高德开放平台:https://lbs.amap.com/ 下载POI分类编码和城市编码表搜索POI相关文档:https://lb ...
JSAPI 高德地图应用--线路规划、多条线路同时展示
在地图应用中,常见的应用之一应该就有查询两个地方的线路规划吧,高德地图提供了驾车路线规划.货车路线规划.公车换乘服务.步行导航服务.骑行路径规划服务等,这里我用的是驾车路线规划做一个列子. 驾车路线规 ...
高德地图API JS实现获取坐标和回显点标记
1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现第一步:引入资源文件  <script src="//webap ...
高德地图引用，搜索定位
以下为最近项目中开发的高得地图定位功能,附上效果图与源代码.mapUtil.jsvar map,addMarker;var geocoder;var placeSearch;var infoWindo ...
Cesium调用高德地图服务实现搜索地点定位详解
一.需求分析需要做一个类似于高德地图的搜索可以参考高德地图,用户输入地点,下拉列表自动弹出少量的相应地点,点击内容地点可以直接选择定位并且添加Cesium的广告牌(图标)和标注,点击标注可以弹出详细 ...
vue+antdesign 高德地图根据名称选点功能，并去除logo 封装组件
高德地图申请key及密钥注册账号并申请key官方地址在vue项目index.html文件中引入 <script type="text/javascript">win ...
高德地图教程_poi搜索以及显示
最近打算高仿深圳通的应用,UI已经做好了,我看过APP的查询接口,断了网也可以查询这就表明数据是保存在数据库,或者就是第一次联网,就在网站将数据全部下好了.我就想干脆用地图提供的查询吧. 以前是接触的 ...
高德地图关键字提示搜索获取经纬度
效果图: 具体代码: <!doctype html> <html> <head><meta charset="utf-8">< ...

高德地图根据名称搜索坐标，坐标点呈现列表展示

效果展示

高德地图根据名称搜索坐标，坐标点呈现列表展示相关推荐

最新文章

热门文章

高德地图 根据名称搜索坐标，坐标点呈现列表展示

效果展示

高德地图 根据名称搜索坐标，坐标点呈现列表展示相关推荐

最新文章

热门文章

高德地图根据名称搜索坐标，坐标点呈现列表展示

高德地图根据名称搜索坐标，坐标点呈现列表展示相关推荐