当前位置:网站首页>高德地图搜索、拖拽 查询地址
高德地图搜索、拖拽 查询地址
2022-04-23 17:42:00 【一挽长夏】
demo-效果图
代码–(引用的地图,key值换成你自己的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图搜索与拖拽选址</title>
<style>
#mapContainer{
position: relative;
width: calc(100vw-20px);
height: calc(100vh - 30px);
background: #fff;
z-index: 1;
overflow: hidden;
}
.searchBox{
position: absolute;
left: 20px;
top: 20px;
z-index: 2;
}
.searchBox #keyword{
height: 30px;
line-height: 30px;
width: 260px;
padding: 0 5px;
}
.searchResult{
position: absolute;
bottom: 50px;
left: 30px;
z-index: 2;
height: 100px;
width: 400px;
background: #fff;
border-radius: 8px;
padding: 20px;
cursor: default;
}
</style>
</head>
<body>
<div id="mapContainer">
<div class="searchBox">
<input id='keyword' type="text" placeholder="请输入查询地点">
</div>
<div class="searchResult">
<p>
<span>经纬度:</span>
<span id="lnglat"></span>
</p>
<p>
<span>地址:</span>
<span id="address"></span>
</p>
</div>
</div>
<div style="display: none">
<script type="text/javascript" src="http://webapi.amap.com/maps?v=2.0&key=${你的地图key值}&plugin=AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.Walking,AMap.Geocoder"></script>
<script src="http://webapi.amap.com/ui/1.0/main.js?v=202112071452"></script>
<script>
AMapUI.loadUI(['misc/PositionPicker'],PositionPicker => {
// 初始化用户区域为地图中心点
const mapConfig = {
zoom: 15, // 地图缩放级别
center: ['117.227237', '31.820513'],
lang: "zh_cn"
}
let mapView = new AMap.Map('mapContainer', mapConfig);
// 构造点标记
// var m3 = new AMap.Marker({
// position: [117.224362,31.820447],
// icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
// });
// mapView.add(m3);
//拖拽地图
var positionPicker = new PositionPicker({
mode: 'dragMarker',//dragMap:拖拽地图,dragMarker:拖拽点
map: mapView,
iconStyle: { //自定义外观
url: 'http://webapi.amap.com/theme/v1.3/markers/b/mark_r.png',
ancher: [24, 40],
size: [24, 30]
}
});
positionPicker.on('success', function (positionResult) {
//拖拽成功的回调 positionResult里有你想要的东西
// console.log('拖拽',positionResult)
document.getElementById('lnglat').innerHTML = positionResult.position.lng+ ','+positionResult.position.lat;
document.getElementById('address').innerHTML = positionResult.address;
});
positionPicker.start();
//搜索提示
AMap.plugin('AMap.Autocomplete', function () {
// 实例化Autocomplete
var autoOptions = {
city: '合肥',
input: "keyword"
}
var auto = new AMap.Autocomplete(autoOptions)
var placeSearch = new AMap.PlaceSearch({
pageSize: 5,
pageIndex: 1,
citylimit: false,
map: mapView,
city: '合肥' //默认城市
});
AMap.event.addListener(auto, "select", select); //注册监听,当选中某条记录时会触发
AMap.event.addListener(auto, "error", onError); //注册监听,当选中某条记录时会触发
//解析定位正确信息
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
var info = e.poi;//地理信息
console.log(info)
document.getElementById('lnglat').innerHTML = info.location.lng+ ','+info.location.lat;
document.getElementById('address').innerHTML = info.district+ info.address;
}
//解析定位错误信息
function onError(data) {
console.log("定位失败")
}
})
})
</script>
</div>
</body>
</html>
版权声明
本文为[一挽长夏]所创,转载请带上原文链接,感谢
https://blog.csdn.net/weixin_43569405/article/details/124292386
边栏推荐
- JS implementation private attribute
- 读《Software Engineering at Google》(15)
- JS failed to change all variables and changed to the return method. Finally, the problem was solved
- JVM class loading mechanism
- 1217_ Generating target files using scons
- 92. 反转链表 II-字节跳动高频题
- Excel quickly and automatically fills the contents of a row on a blank cell
- 嵌入式系统中,FLASH中的程序代码必须搬到RAM中运行吗?
- [difference between Oracle and MySQL]
- Ouvrir des contrats à terme, ouvrir des comptes en nuage ou faire confiance aux logiciels des sociétés à terme?
猜你喜欢
2022年流动式起重机司机国家题库模拟考试平台操作
Advantages and disadvantages of several note taking software
2022年茶艺师(初级)考试模拟100题及模拟考试
Halo 开源项目学习(二):实体类与数据表
Summary of common SQL statements
Compare the performance of query based on the number of paging data that meet the query conditions
Index: teach you index from zero basis to proficient use
1217_ Generating target files using scons
Future usage details
440. The k-th small number of dictionary order (difficult) - dictionary tree - number node - byte skipping high-frequency question
随机推荐
1217_ Generating target files using scons
Dry goods | how to extract thumbnails quickly?
STM32 entry development board choose wildfire or punctual atom?
Kubernetes 服务发现 监控Endpoints
JS interview question: FN call. call. call. Call (FN2) parsing
440. The k-th small number of dictionary order (difficult) - dictionary tree - number node - byte skipping high-frequency question
MySQL进阶学习之SQL优化【插入,主键,排序,分组,分页,计数】
209. Minimum length subarray - sliding window
ES6 new method
01-初识sketch-sketch优势
Manually implement simple promise and its basic functions
Open futures, open an account, cloud security or trust the software of futures companies?
Learning record of uni app dark horse yougou project (Part 2)
Sword finger offer 03 Duplicate number in array
Low code development platform sorting
470. 用 Rand7() 实现 Rand10()
440. 字典序的第K小数字(困难)-字典树-数节点-字节跳动高频题
C listens for WMI events
Leak detection and vacancy filling (VII)
[difference between Oracle and MySQL]