JS实现高德地图标点获取经纬度,并转换成详细地址

本文主要是介绍JS实现高德地图标点获取经纬度,并转换成详细地址,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp" %>
<html>
<head><title>地图</title><meta name="decorator" content="ani"/>
</head>
<body class="bg-white">
<form:form id="inputForm" modelAttribute="eddChargeStation" class="form-horizontal"><form:hidden path="id"/><table class="table table-bordered"><tbody><tr><td class="width-15 active"><label class="pull-right">地图:</label></td><td class="width-35"><%--	<form:input path="address" htmlEscape="false"    class="form-control "/>--%><div id="addr" style="height: 200px;width: 100%"></div></td><td class="width-15 active"><label class="pull-right">地址:</label></td><td class="width-35"><form:input path="address" htmlEscape="false" class="form-control " id="address"/></td></tr><tr><td class="width-15 active"><label class="pull-right">纬度:</label></td><td class="width-35"><form:input path="lat" htmlEscape="false" class="form-control " id="lat"/></td><td class="width-15 active"><label class="pull-right">经度:</label></td><td class="width-35"><form:input path="lon" htmlEscape="false" class="form-control " id="lng"/></td></tr></tbody></table>
</form:form>
<script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.10&key="你申请的key"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<%--地图控件--%>
<script type="text/javascript">//初始化地图对象,加载地图var map = new AMap.Map("addr", {resizeEnable: true});//获取定位标记var marker = new AMap.Marker({position: map.getCenter(),//draggable: true,cursor: 'move',raiseOnDrag: true});marker.setMap(map);//为地图注册click事件获取鼠标点击出的经纬度坐标var clickEventListener = map.on('click', function(e) {//alert(e.lnglat.getLng());document.getElementById("lng").value = e.lnglat.getLng();document.getElementById("lat").value = e.lnglat.getLat();marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]); //});var clickEventListener = map.on('click', function(e) {var lng = e.lnglat.getLng();var lat = e.lnglat.getLat();console.log("经度:"+lng+"纬度"+lat);var lnglatXY = [lng, lat];//地图上所标点的坐标AMap.service('AMap.Geocoder',function() {//回调函数geocoder = new AMap.Geocoder({});geocoder.getAddress(lnglatXY, function (status, result) {if (status === 'complete' && result.info === 'OK') {//获得了有效的地址信息://即,result.regeocode.formattedAddress// alert(result.regeocode.formattedAddress)document.getElementById("address").value=result.regeocode.formattedAddress;//将获取到的地址信息赋值给文本框,保存进数据库var address = result.regeocode.formattedAddress;} else {//获取地址失败}});})});/*var auto = new AMap.Autocomplete({input: "tipinput"});
*/AMap.event.addListener(auto, "select", select);//注册监听,当选中某条记录时会触发function select(e) {if (e.poi && e.poi.location) {map.setZoom(15);map.setCenter(e.poi.location);}}
</script>
</body>
</html>

这篇关于JS实现高德地图标点获取经纬度,并转换成详细地址的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/949314

相关文章

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola