高德地图如何获取点击位置的经纬度。

使用获取高德地图首先要注册高德地图获取k值在引用链接渲染地图

下面直接上代码

js部分

	// 地图坐标
		let leng = '35.302616';
		let lang = '113.883991';
		//初始化地图时,若center属性缺省,地图默认定位到用户所在城市的中心,
		function ad() {
			var map = new AMap.Map('container', {
				resizeEnable: true, //是否监控地图容器尺寸变化
				zoom: 14, //初始化地图层级
				center: [lang, leng] //初始化地图中心点
		
			});
			
		}
		
		ad();
		// 初始化地图
		let map = new AMap.Map('container', {
		    resizeEnable: true,
		    zoom: 14,
		    center: [lang, leng]
		});
		
		// 点击地图事件
		map.on('click', function(e) {
			console.log(666);
		    let position = e.lnglat; // 获取点击位置的经纬度坐标
		    console.log(position.lng, position.lat); // 显示经纬度坐标
		    // 这里你可以将经纬度坐标显示在页面上的指定位置,比如一个div容器中
		    document.getElementById('contacte').innerHTML = '经度:' + position.lng + ', 纬度:' + position.lat;
		});
var backgroundColor = $('.toggle-switch-handle').css('background-color');
			console.log(backgroundColor);
		// 切换事件获取状态
		let asd=[];
		let asf=[];
		function tt(e) {
			// console.log($('#outt').checked);
//滑块按钮开启时执行
			console.log(e);
			if (e == true) {
				
				leng='35.281454'
				lang='113.978255'
				asd=['35.281454']
				asf=['113.978255']
				sessionStorage.setItem('zuo',asd)
				sessionStorage.setItem('biao',asf)
				ad()
				map = new AMap.Map('container', {
				    resizeEnable: true,
				    zoom: 14,
				    center: [lang, leng]
				});
				
				// 点击地图事件
				map.on('click', function(e) {
					console.log(666);
				    let position = e.lnglat; // 获取点击位置的经纬度坐标
				    console.log(position.lng, position.lat); // 显示经纬度坐标
				    // 这里你可以将经纬度坐标显示在页面上的指定位置,比如一个div容器中
				    document.getElementById('contacte').value = '经度:' + position.lng + ', 纬度:' + position.lat;
				});
				// 调用高德地图的逆地理编码服务
				AMap.service('AMap.Geocoder', function() {
				    var geocoder = new AMap.Geocoder({
				        // 结果返回参数
				        city: "0371", // 城市,可选,默认是全国
				        radius: 1000 // 范围,默认是500
				    });
				
				    // 将获取到的经纬度坐标作为参数传递给逆地理编码服务
				    map.on('click', function(e) {
				        let lnglat = e.lnglat; // 获取点击位置的经纬度坐标
				        geocoder.getAddress(lnglat, function(status, result) {
				            if (status === 'complete' && result.regeocode) {
				                var address = result.regeocode.formattedAddress; // 获取解析后的结果,即位置信息的地名
				                console.log(address); // 显示位置信息的地名
				            }
				        });
				    });
				});
				
			} else if (e == false) {
//关闭时执行
			leng = '35.302616'
			lang = '113.883991'
			ad()
			sessionStorage.removeItem('zuo')
			sessionStorage.removeItem('biao')
			}
		}

我这里只写功能,至于布局和样式阅读者可以根据自己的需求去写希望可以帮到你们

你可能感兴趣的:(数据库,mysql)