当前位置:网站首页>高德地图搜索、拖拽 查询地址
高德地图搜索、拖拽 查询地址
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
边栏推荐
- 圆环回原点问题-字节跳动高频题
- Commonly used functions -- spineros:: and spineros::)
- XTask与Kotlin Coroutine的使用对比
- The system cannot be started after AHCI is enabled
- flink 学习(十二)Allowed Lateness和 Side Output
- This point in JS
- Qt error: /usr/bin/ld: cannot find -lGL: No such file or directory
- 一些问题一些问题一些问题一些问题
- Flash project cross domain interception and DBM database learning [Baotou cultural and creative website development]
- 122. The best time to buy and sell stocks II - one-time traversal
猜你喜欢
Comparison between xtask and kotlin coroutine
关于gcc输出typeid完整名的方法
JVM class loading mechanism
SiteServer CMS5. 0 Usage Summary
SystemVerilog(六)-变量
Exercise: even sum, threshold segmentation and difference (two basic questions of list object)
练习:求偶数和、阈值分割和求差( list 对象的两个基础小题)
Halo 开源项目学习(二):实体类与数据表
Using quartz under. Net core - [1] quick start
Element calculation distance and event object
随机推荐
Use of todesk remote control software
Add drag and drop function to El dialog
Metaprogramming, proxy and reflection
Qt 修改UI没有生效
给 el-dialog 增加拖拽功能
2022年上海市安全员C证操作证考试题库及模拟考试
.Net Core3. 1 use razorengine NETCORE production entity generator (MVC web version)
386. Dictionary order (medium) - iteration - full arrangement
開期貨,開戶雲安全還是相信期貨公司的軟件?
Entity Framework core captures database changes
剑指 Offer 03. 数组中重复的数字
How to change input into text
ECMAScript history
[ES6] promise related (event loop, macro / micro task, promise, await / await)
Using quartz under. Net core -- job attributes and exceptions of [4] jobs and triggers
[related to zhengheyuan cutting tools]
How to manually implement the mechanism of triggering garbage collection in node
Comparison between xtask and kotlin coroutine
Halo open source project learning (II): entity classes and data tables
92. Reverse linked list II byte skipping high frequency question