输入地址查询并获取地址的经纬度-百度地图-JS

最新推荐文章于 2023-05-08 15:52:49 发布

夜空繁星vv

最新推荐文章于 2023-05-08 15:52:49 发布

阅读量730

点赞数

分类专栏：百度地图

本文链接：https://blog.csdn.net/weixin_43852094/article/details/117293389

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

demo--百度地图

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="form-group">
								<label class="col-sm-3 control-label">详细地址：</label>
								<div class="col-sm-8">
									<input  id="suggestId" name="address" class="form-control" type="text" />
									<!--<input id="suggestId" name="companyAddressDetail" class="form-control" type="text">-->
									<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
								</div>

							</div>
										
										
										
										
							<div class="form-group">
								<label class="col-sm-3 control-label"></label>
								<div class="col-sm-8">
									<div id="l-map" class="col-sm-17" style="height: 300px;"></div>
								</div>
							</div>
	
	
</body>





	
	<script type="text/javascript"
				src="http://api.map.baidu.com/api?v=2.0&ak=你自己申请的百度地图的key"></script>
	
	
		<script type="text/javascript">
			
			
			// 百度地图API功能
			function G(id) {
				return document.getElementById(id);
			}
			/*var map = new BMapGL.Map('container');*/
			var map = new BMap.Map("l-map");
			map.enableScrollWheelZoom(true);
			map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。
			// map.center(12);
	
			var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
					{"input" : "suggestId"
						,"location" : map
					});
	
			ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
				
				var str = "";
				var _value = e.fromitem.value;
				var value = "";
				if (e.fromitem.index > -1) {
					value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
				}
				str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
	
				value = "";
				if (e.toitem.index > -1) {
					_value = e.toitem.value;
					value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
				}
				str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
				G("searchResultPanel").innerHTML = str;
			});
	
			var myValue;
			ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
				G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
	
				setPlace();
			});
			
			//获取地址的经度度
			function setPlace(){
		        map.clearOverlays();    //清除地图上所有覆盖物
		        function myFun(){
		            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
		            
					console.log("维度="+pp.lat+"-----经度==="+pp.lng);
		            map.centerAndZoom(pp, 18);
		            map.addOverlay(new BMap.Marker(pp));    //添加标注
		        }
		        var local = new BMap.LocalSearch(map, { //智能搜索
		          onSearchComplete: myFun
		        });
		        local.search(myValue);
		    }
			
			
	
			/* function setPlace(){
				map.clearOverlays();    //清除地图上所有覆盖物
				function myFun(){
					var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
					map.centerAndZoom(pp, 18);
					map.addOverlay(new BMap.Marker(pp));    //添加标注
				}
				var local = new BMap.LocalSearch(map, { //智能搜索
					onSearchComplete: myFun
				});
				local.search(myValue);
			} */
			var loading ;
			map.addEventListener('click', function (e) {
				// alert('点击位置经纬度：' + e.point.lng + ',' + e.point.lat);
				$('#lat').val(e.point.lng);//获取到的纬度
				$('#lon').val(e.point.lat);//获取到的经度
				// 清除地图上所有的覆盖物
				map.clearOverlays();
				var point = new BMap.Point(e.point.lng, e.point.lat);
				map.centerAndZoom(point, 19);
				var marker = new BMap.Marker(point);
				map.addOverlay(marker);
				loading = layer.load(1,{
					icon: 0, // 0~2 ,0比较好看
					shade: [0.5,'black'] // 黑色透明度0.5背景
				});
				getaddress(e);
			});
			function getaddress(e){
				//浏览器定位
				var geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition(function(r){
					if(this.getStatus() == BMAP_STATUS_SUCCESS){
						var mk = new BMap.Marker(e.point);
						map.addOverlay(mk);
						map.panTo(e.point);
	
	
						var gc = new BMap.Geocoder();
						var pointAdd = new BMap.Point(e.point.lng, e.point.lat);
						gc.getLocation(pointAdd, function(rs){
							try {
								$("#suggestId").val(rs.surroundingPois[0].title);
								$("#province").val(rs.addressComponents.province);
								$("#city").val(rs.addressComponents.city);
								$("#county").val(rs.addressComponents.district);
	
							}catch (e) {
								layer.alert("所选位置没有详细名称");
							}
							layer.close(loading);
	
						})
					}
					else {
						
					}
				},{enableHighAccuracy: true});
			}
	
		</script>
		
		
		
		
		

</html>

技术交流群

夜空繁星vv

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
输入地址查询并获取地址的经纬度-百度地图-JS

demo--百度地图<!DOCTYPE html><html><meta charset="utf-8"><head th:include="include :: header"></head><body class="gray-bg"> <div class="form-group"> <label class="col-sm-3 control-label">详细地址...
复制链接

扫一扫