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


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代码:



	
    


		
		

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变得好看。。。

你可能感兴趣的:(esri)