ArcGIS API for JavaScript 实现点击地图显示此点经纬度

最新推荐文章于 2024-07-27 23:17:42 发布

一片大好全是形式

最新推荐文章于 2024-07-27 23:17:42 发布

阅读量8.8k

点赞数 1

分类专栏： esri 文章标签： web前端 arcgis

本文链接：https://blog.csdn.net/qq_38297860/article/details/81485993

版权

esri 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、首先，在网页上显示地图：

js代码如下:

$(document).ready(function() {
	var map;
	require([
		"esri/map", 
		 "dojo/dom", "dojo/domReady!"
	], function(
		Map,  dom
	) {
		map = new Map("container", {  //"container" 为HTML代码里承载地图的div控件
			basemap: "hybrid",//地图类型
			center: [120.44109, 35.6122],//初始中心坐标经纬度
			zoom: 6  //地图初始缩放大小
		});
		
		}
	});
});

部分HTML代码：

<html>
<head>
	<!--设置一下让地图全屏显示-->
    <style type="text/css">
			html,body,#container{
				position:fixed;
				padding: 0;
            	margin: 0;
				height: 100%;
				width: 100%;
			}
		</style>
</head>
<body>
		<!--地图-->
		<div id="container">
			
		</div>
</body>
</html>

2、在map上添加点击触发事件，获取经纬度显示（接着上面创建完map写）

通过getLatitude()函数获得纬度，getLongitude（）获得经度

map.on("click", function(ev) {
		var lat = Math.round(ev.mapPoint.getLatitude() * 1000) / 1000;
        var lon = Math.round(ev.mapPoint.getLongitude() * 1000) / 1000;
        alert(lat+","+lon);
});

如果先实现点击后鼠标处弹出框显示经纬度，可自己在HTML添加一个div，在点击触发事件中改此div的scss代码即可：

map.on("click", function(ev) {
            //jingweidu 为div的id
			var divv = document.getElementById('jingweidu');
			var lat = Math.round(ev.mapPoint.getLatitude() * 1000) / 1000;
            var lon = Math.round(ev.mapPoint.getLongitude() * 1000) / 1000;
 
			
			var oEvent = ev || event;
			divv.style.left = (oEvent.clientX + 10) + "px";
			divv.style.top = (oEvent.clientY + 5) + "px";
			divv.style.position = "absolute";//这里必须改position属性
			divv.innerHTML = lat+ "," +lon;
		});

后期，可以自己写css，让此div变得好看。。。