高德地图拾取经纬度 + 搜索 + 标记

最新推荐文章于 2024-03-13 11:03:58 发布

会篮球的程序猿

最新推荐文章于 2024-03-13 11:03:58 发布

阅读量1.1w

点赞数 1

分类专栏：地图

本文链接：https://blog.csdn.net/weixin_44944193/article/details/107555935

版权

地图专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图：（不说样式了，效果出来就行）

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script>
		<style>
			#iMap {
		        height: 450px;
		        width: 800px;
		        position: absolute;
		        margin-left: 100px;
		        margin-top: 15px;
		        margin-bottom: 25px;
		        z-index: 999999;
		    }
		
		    .info {
		        float: left;
		        margin: 0 0 0 10px;
		    }
		
		    label {
		        width: 80px;
		        float: left;
		    }
		
		    .detail {
		        padding: 10px;
		        border: 1px solid #aaccaa;
		    }
		
		    .layui-btn-te {
		        margin-top: 500px;
		    }
			input{
				width: 450px;
				line-height: 25px;
			}
		</style>
	</head>
	<body>
		<div class="layui-form-item">
			<label class="layui-form-label">企业名称</label>
			<div class="layui-input-block">
				<input type="text" name="title" value="" autocomplete="off" placeholder="请输入企业名称" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">电话</label>
			<div class="layui-input-block">
				<input type="number" name="mobile" value="" autocomplete="off" placeholder="请输入企业名称" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">详细地址</label>
			<div class="layui-input-block">
				<input type="text" id="particular_site" name="particular_site" value="" readonly autocomplete="off" placeholder="点击地图自动选定"
				 class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">经纬度</label>
			<div class="layui-input-block">
				<input type="text" name="longitude" id="longitude" value="" readonly autocomplete="off" placeholder="点击地图自动选定"
				 class="layui-input">
			</div>
		</div>
		<input type="hidden" name="lng" id="lng" value="">
		<input type="hidden" name="lat" id="lat" value="">
		<div class="layui-form-item">
			<label class="layui-form-label">搜索地址</label>
			<div class="layui-input-block">
				<input type="text" id="addressBox" autocomplete="off" placeholder="可搜索地址" class="layui-input">
				<button type="button" onclick="geocoder();" class="layui-btn layui-btn-primary layui-btn-position">搜索</button>
			</div>
		</div>

		<div id="iMap"></div>

	</body>
</html>
<script language="javascript">
	var addressBox = document.getElementById('addressBox');
	var longitude = document.getElementById('longitude').value;
	var lng = document.getElementById('lng').value;
	var lat = document.getElementById('lat').value;
	var mapObj;
	var lnglatXY;
	//初始化地图
	function mapInit(x, y) {
		mapObj = new AMap.Map("iMap", {
			zoom: 16,
			center: new AMap.LngLat(x, y)
		});
		AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件
		punctuation(x, y);
	}

	//标点展示
	function punctuation(x, y) {
		var marker = new AMap.Marker({
			map: mapObj,
			position: [x, y]
		});
	}

	if (longitude != "") {
		mapInit(lng, lat);
	} else {
		mapInit(113.9268, 35.303004);
	}

	function geocoder() {
		mapObj.clearMap();
		var myGeo = new AMap.Geocoder();
		//地理编码,返回地理编码结果
		myGeo.getLocation(addressBox.value, function(status, result) {
			if (status === 'complete' && result.info === 'OK') {
				//地址解析成功
				// var address = data.regeocode.formattedAddress;
				var x = result.geocodes[0].location.lng;
				var y = result.geocodes[0].location.lat;
				// document.getElementById("particular_site").value = address;
				document.getElementById("longitude").value = x + "," + y; //经纬度
				document.getElementById("lng").value = x; //经度
				document.getElementById("lat").value = y; //纬度
				var XY = [x, y];
				mapInit(x, y);
				regeocoder(XY);
				punctuation(x, y); //更新标记
			} else {
				//地址解析失败
				alert("地址不存在")
			}
		});
	}

	//鼠标点击，获取经纬度坐标
	function getLnglat(e) {
		mapObj.clearMap();
		console.log(e);
		var x = e.lnglat.getLng();
		var y = e.lnglat.getLat();
		document.getElementById("longitude").value = x + "," + y; //经纬度
		document.getElementById("lng").value = x; //经度
		document.getElementById("lat").value = y; //纬度
		var XY = [x, y];
		regeocoder(XY);
		punctuation(x, y); //更新标记
		lnglatXY = new AMap.LngLat(x, y);
	}

	//地址详细描述
	function regeocoder(loc) { //逆地理编码
		console.log(loc);
		var geocoder = new AMap.Geocoder({
			radius: 1000,
			extensions: "all"
		});
		geocoder.getAddress(loc, function(status, result) {
			if (status === 'complete' && result.info === 'OK') {
				geocoder_CallBack(result);
			}
		});
	}

	function geocoder_CallBack(data) {
		var address = data.regeocode.formattedAddress; //返回地址描述
		document.getElementById("particular_site").value = address;
	}
</script>
<!-- js结束 -->

会篮球的程序猿

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
高德地图拾取经纬度 + 搜索 + 标记

代码：<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>坐标</title> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb
复制链接

扫一扫