调用高德api 实现地点搜索,且获取经纬度

因为高德地图开发平台改版，坐标拾取功能中的经纬度仅显示小数点后2位（原先是6位），所以会导致坐标不准确。因此只能通过地图js api复刻一版：

1、在高德地图的开放平台注册账号并注册为开发者

2、选择想要实现的功能，我用的是搜索，以下代码也是搜索功能

3.代码实现

版本1

<!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://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" /><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: '你的安全秘钥',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script><style type="text/css">html,body {width: 100%;height: 100%;margin: 0px;font-size: 14px;}.map {height: 100%;width: 100%;float: left;}#container {height: calc(100% - 100px);position: relative;background-color: #fff;text-align: left;border: 2px solid #3d6eff;border-right: none;border-left: none;}#tipinput {border: 1px solid #ced4da;}.search_input {margin: 0 10px 0 0;height: 32px;padding: 0 10px;line-height: 32px;border: 1px solid #d7d8d9;border-radius: 2px;}div {display: block;}#abc {width: 980px;background: #fff;margin: 10px auto;padding: 0 0 10px 10px;}table {border-spacing: 0;width: 100%;}.picker-btn {background: #3d6eff;display: inline-block;height: 32px;line-height: 32px;padding: 0 20px;text-decoration: none;color: #fff;border-radius: 2px;font-size: 15px;}#copySuccessMessage{font-size: 12px;color: #20d1b5;}</style></head><body><div id="hd" class="barn clearfix"><div id="abc"><table><tbody><tr class="tr-radio"><td><label>按关键字搜索：</label></td><td><label>坐标获取结果：</label><span id="copySuccessMessage" class="message" style="display: none;">复制成功！</span></td></tr><tr class="tr-text"><td data-spm-anchor-id="0.0.0.i4.37607632hLHuju"><input type="text" style="width: 280px;" class="search_input" name="search" id="tipinput" placeholder="请输入关键字进行搜索"data-spm-anchor-id="0.0.0.i3.37607632hLHuju"></td><td><input type="text" style="width: 280px;" class="search_input" id="txtCoordinate" name="coordinate" readonly=""><a href="javascript:;" title="复制" class="picker-btn picker-copy" id="copy_text" onclick="copyText()">复制</a></td></tr></tbody></table></div></div><div id="container"></div><!-- <div id="myPageTop"><table><tr><td><label>请输入关键字：</label></td></tr><tr><td><input id="tipinput" /></td></tr></table></div> -->
<!--         <div class="input-card"><h4>左击获取经纬度：</h4><div class="input-item"><input type="text" readonly="true" id="lnglat"></div></div> --><script type="text/javascript">//地图加载var map = new AMap.Map("container", {resizeEnable: true});//输入提示var autoOptions = {input: "tipinput"};AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() {var auto = new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map}); //构造地点查询类auto.on("select", select); //注册监听，当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name); //关键字查询查询}});//为地图注册click事件获取鼠标点击出的经纬度坐标map.on('click', function(e) {document.getElementById("txtCoordinate").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()});function copyText() {var input = document.getElementById("txtCoordinate");input.select(); // 选中文本document.execCommand("copy"); // 执行浏览器复制命令//文字展示document.getElementById("copySuccessMessage").style.display="";setTimeout(function(){document.getElementById("copySuccessMessage").style.display="none";},1000);}</script></body>
</html>

实现效果

版本2

<!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://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'你的安全秘钥',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script><style type="text/css">html,body{width: 100%;height: 100%;margin: 0px;}.map{height: 100%;width: 100%;float: left;}</style>
</head>
<body>
<div id="container"></div>
<div id="myPageTop"><table><tr><td><label>请输入关键字：</label></td></tr><tr><td><input id="tipinput"/></td></tr></table>
</div>
<div class="input-card"><h4>左击获取经纬度：</h4><div class="input-item"><input type="text" readonly="true" id="lnglat"></div>
</div>
<script type="text/javascript">//地图加载var map = new AMap.Map("container", {resizeEnable: true});//输入提示var autoOptions = {input: "tipinput"};AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){var auto = new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map});  //构造地点查询类auto.on("select", select);//注册监听，当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  //关键字查询查询}});//为地图注册click事件获取鼠标点击出的经纬度坐标map.on('click', function(e) {document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()});
</script>
</body>
</html>

实现效果

到这里也就完事了，因为我个人是后端，前端沒有太多了解，大佬们可以自己完善样式

调用高德api 实现地点搜索,且获取经纬度相关推荐

Python爬取链家网获取二手房数据并调用高德api获得经纬度
链家网获得数据地址,高德api获得经纬度(同理链家网也可以换成其他58同城,赶集网的数据,因为反爬虫比较厉害,没时间整,就用链家网的数据先试试水) 首先爬链家网,Info包含一条信息 import j ...
python调用高德api路径规划_Python调用高德API实现批量地址转经纬度并写入表格的功能...
本段代码是先将需要转换经纬度的地址爬取在 '地址.csv' 文件里,文件截图示例: 代码展示 # coding=utf-8 # SPL # 时间:2020/12/20 21:15 import csv ...
python调取高德api_Python调用高德API实现批量地址转经纬度并写入表格的功能
本段代码是先将需要转换经纬度的地址爬取在 '地址.csv' 文件里,文件截图示例: 代码展示 # coding=utf-8 # SPL # 时间:2020/12/20 21:15 import csv ...
高德地图——浏览器定位+点击获取经纬度+去除高德百度地图左下角logo
高德地图--浏览器定位+点击获取经纬度+去除高德百度地图左下角logo 1.代码 <!doctype html> <html> <head><meta cha ...
vue3调用百度地图标注选择位置并获取经纬度
vue3调用百度地图标注选择位置并获取经纬度参考了很多文章,最终结合百度文档各有采取完成地图选取经纬度. 第一步:引入百度地图,在当前需要地图的页面引入就行. const loadMapScript ...
进阶1·调用高德API获取交通数据(多个URL访问,字典提取,while无限循环下的程序间断运行)
调用高德开放API获取实时交通数据想法及思路现在大型网站都提供了好多开放API,根据这些开放API可以做一些比较有趣的东西,本次调用高德开放api实时获取你想知道的道路拥堵状况工具及技术: Py ...
微信小程序调用高德api定位当前经纬度，根据城市名获取对应经纬度
最近写小程序有一个首页关于定位功能,指定高德API,话不多说,上图: 首先小程序需要先设置定位提示语,在mainfest.json中添加配置scope.userLocation: "mp-w ...
获取中国省、市、区数据（调用高德API）
一.数据来源:高德开发API(后端调用接口实现数据落库) 行政区域查询-API文档-开发指南-Web服务 API | 高德地图API 二.需要用到的依赖(只附上主要依赖) 其他依赖:MybatisPl ...
Google Map API使用谷歌地图api实现地点搜索功能
需求:提供谷歌地图搜索地点功能,并查出经纬度坐标. 官方文档:https://developers.google.com/maps/?hl=zh-cn 地点详情接口: https://maps.goo ...
php调用百度接口获取经纬度,利用百度API(js)，通过地址获取经纬度的注意事项...
网上给的很多答案都是这种: http://api.map.baidu.com/geocoder?address=地址&output=输出格式类型&key=用户密钥&city=城 ...

调用高德api 实现地点搜索,且获取经纬度

1、在高德地图的开放平台注册账号并注册为开发者

2、选择想要实现的功能，我用的是搜索，以下代码也是搜索功能

3.代码实现

版本1

实现效果

版本2

实现效果

调用高德api 实现地点搜索,且获取经纬度相关推荐

最新文章

热门文章