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、实现结果


  • 相关阅读:
    数据库被挂马3
    將目標網址轉換成HTML
    四步堵死3b3.org c.js注入
    GBK与UTF8编码选择与区分
    C#连Oracle数据库
    Session过期时间的四种设置方式
    怎么从内容页访问母板页
    Response.Charset与Response.ContentEncoding的区别
    CommandBehavior.CloseConnection的使用
    尽可能的使用强类型
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314181.html
Copyright © 2011-2022 走看看