zoukankan      html  css  js  c++  java
  • 高德地图-鼠标获取坐标

    1、问题背景

         鼠标点击地图,获取点击处的经纬度,并将经度和纬度放到输入框中


    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="http://cache.amap.com/lbs/static/main1119.css"/>
    		<script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
        	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=密钥&plugin=AMap.Autocomplete"></script>
            <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
            <style>
            	body,html,#initMap{
            		 100%;
            		height: 100%;
            		font-size: 12px;
            		font-family: "微软雅黑";
            	}
            </style>
    	</head>
    	<body>
    		<div id="initMap"></div>
    		<div id="myPageTop">
    			<table>
    				<tr>
    					<td>
    						<label>经度:</label>
    					</td>
    					<td>
    						<label>纬度:</label>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<input type="text" id="lat" />
    					</td>
    					<td>
    						<input type="text" id="lon" />
    					</td>
    				</tr>
    			</table>
    		</div>
    		<script>
            	var map = new AMap.Map("initMap",{
            		resizeEnable: true
            	});
            	
            	map.on('click', function(e) {
            		//经度
    		        document.getElementById("lat").value = e.lnglat.getLng();
    		        //纬度
    		        document.getElementById("lon").value = e.lnglat.getLat();
    		    });
            </script>
    	</body>
    </html>
    

    3、实现结果


  • 相关阅读:
    Ceph性能优化
    查看linux中的TCP连接数
    从 PC 卸载 Office
    VDI数据恢复
    xencenter迁移云主机方法
    深入解析UUID及其应用(转载)
    XenServer master主机的作用
    解决CentOS下可以ping通ip ping不通域名
    利用Powershell查询AD中账号属性
    创建进程的第二种方法,以后很多都用这个方法。
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314181.html
Copyright © 2011-2022 走看看