当前位置：首页 > news >正文

HTML页面配置高德地图，获取位置

news 2025/7/7 19:37:38

HTML页面配置高德地图，获取位置

一、使用情况

1、之前项目用的前后端分离框架，所以用Vue接入的高德地图，自动搜索补全，是请求的后台返回的数据。
2、现在用单体项目，前端是Bootstrap，需要接高德地图，自动搜索补全，直接是前端请求数据，没有通过后台。
3、申请key的方式，可以看之前的文档。此处需要注意，如下图：
在这里插入图片描述

二、功能介绍

1、打开地图，鼠标点击获取经纬度，并标记
2、输入搜索条件，提示对应相关信息，下拉选择
3、点击对应数据，地图跳转该位置，并标记

三、效果图

在这里插入图片描述

四、HTML页面

1、页面代码
注：为了测试，此处安全密钥直接配置在了代码中，其余方式可参考JS API 安全密钥使用

<!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" /><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script><link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/><script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script><style>html,body,#container {width: 100%;height: 100%;}</style>
</head><body>
<div id="container" class="map"></div>
<div id="myPageTop"><table><tr><td><label>请输入关键字：</label></td></tr><tr><td><input id="tipinput"/></td></tr></table>
</div>
<div id="autodiv"></div>
<div class="input-card"><h4>左击获取经纬度：</h4><div class="input-item"><input type="text" readonly="true" id="lnglat"></div>
</div><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: "对应的安全密钥",};
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=自己申请的Web端(JS API)&plugin=AMap.AutoComplete"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">var marker, map = new AMap.Map("container", {zoom: 11,resizeEnable: true,center: [116.397428, 39.90923], //地图中心点});//输入提示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);  //关键字查询查询var latLngArr = [e.poi.location.lng, e.poi.location.lat]//添加标记map.clearMap();marker = new AMap.Marker({icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: [e.poi.location.lng, e.poi.location.lat],offset: new AMap.Pixel(-13, -30)});marker.setMap(map);map.setCenter(latLngArr);document.getElementById("lnglat").value = e.poi.location.lng + ',' + e.poi.location.lat}});//为地图注册click事件获取鼠标点击出的经纬度坐标map.on('click', function(e) {document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()var latLngArr = [e.lnglat.getLng(), e.lnglat.getLat()]//添加标记map.clearMap();marker = new AMap.Marker({icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: [e.lnglat.getLng(), e.lnglat.getLat()],offset: new AMap.Pixel(-13, -30)});marker.setMap(map);map.setCenter(latLngArr);});
</script>
</body>
</html>

一个在学习的开发者，勿喷，欢迎交流

查看全文

http://www.lryc.cn/news/433996.html