地图坐标位置显示

最新推荐文章于 2023-11-02 11:05:48 发布

程序猿明天

最新推荐文章于 2023-11-02 11:05:48 发布

阅读量1.5k

点赞数

分类专栏： MapAPI 文章标签：百度地图API 坐标位置显示逆地理编码

本文链接：https://blog.csdn.net/lm9521/article/details/83105799

版权

MapAPI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= 写你自己的 没有的话申请一个"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
	<title>地图展示</title>
</head>
<body>
	<div style="width: 800px;height: 500px;border:solid 1px;margin-left: 300px;margin-top:50px;">
		<div id="allmap">
	</div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap", {enableMapClick:false});    // 创建Map实例   enableMapClick:false 构造底图时，关闭底图可点功能
	var point = new BMap.Point(116.404, 39.915);    //构造点坐标
	map.centerAndZoom(point, 5);  // 初始化地图,设置中心点坐标和地图级别


    var overView = new BMap.OverviewMapControl();
    //BMAP_ANCHOR_BOTTOM_RIGHT	控件将定位到地图的右下角
    var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});

    map.addControl(overView);          //添加默认缩略地图控件
    map.addControl(overViewOpen);      //右下角，打开


	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	
//	map.disableDragging();     //禁止拖拽
//  map.enableDragging();      //开启拖拽
map.setCurrentCity("北京");       

	/* 弧线  */
	var beijingPosition=new BMap.Point(116.432045,39.910683),
	hangzhouPosition=new BMap.Point(120.129721,30.314429),
	taiwanPosition=new BMap.Point(121.491121,25.127053);
	var cpoints = [beijingPosition,hangzhouPosition, taiwanPosition];
	
	var curve = new BMapLib.CurveLine(cpoints, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
	map.addOverlay(curve); //添加到地图中

	
	var c_json_data = [[121.491121,25.127053],[120.129721,30.314429],[116.432045,39.910683]];

	var arr_datas = [];
	
	for (var i = 0; i < c_json_data .length; i ++) {
		var arr_data = "arr_data_" + i;	
		arr_data = new BMap.Point(c_json_data[i][0],c_json_data[i][1]);
		arr_datas[i] = arr_data;

	}

	var json_datasc = [];
	
	/* 逆地理编码 */
	var index = 0;
	
	var myGeo = new BMap.Geocoder();
		

/*	for (var i = 0;i<arr_datas.length;i++) {
		
		var pt = arr_datas[i];
		
		myGeo.getLocation(pt,function(rs){
			var addComp = rs.addressComponents;
			console.log(rs.point.lng+","+rs.point.lat+","+addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + ", " + addComp.streetNumber);					
		});
	}
*/
	bdGEO(0);
	var json_datas = [];
	
	function bdGEO(){	
		var pt = arr_datas[index];
		geocodeSearch(pt);
		var json_data = "json_datas_"+ index;
		index++;
	}
	
	function geocodeSearch(pt){
		if(index < arr_datas.length-1){
			setTimeout(window.bdGEO,400);
		} 
		myGeo.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			console.log(rs.point.lng+","+rs.point.lat+","+addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + ", " + addComp.streetNumber);					
			json_data = [rs.point.lng,rs.point.lat,addComp.province+ "，" +addComp.city+addComp.district+addComp.street+addComp.streetNumber];
			json_datas[index-1] = json_data;
			if(index == arr_datas.length){
				alert(json_datas);
				showJson(json_datas);
			}
		});

	}
	
	function showJson(json_datas){
		
	
		/* 添加多个点 参考信息窗口 示例 给多点添加信息  */
		
/*		var json_datacs = [[121.491121,25.127053,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
						 [120.129721,30.314429,"地址：北京市东城区东华门大街"],
						 [116.432045,39.910683,"地址：北京市东城区正义路甲5号"]];
	*/
	
	
		for (var i = 0; i < json_datas.length; i ++) {
			var c_point = new BMap.Point(json_datas[i][0],json_datas[i][1]);//创建标注
			var content = json_datas[i][2]; //地址内容	
			addMarker(i,c_point,content);
		}
		
			
		/* 为多个点 添加信息窗口  */	
		var opts = {
			width : 250,     // 信息窗口宽度
			height: 80,     // 信息窗口高度
			title : "信息窗口" , // 信息窗口标题
			enableMessage:true//设置允许信息窗发送短息
	    };
		
		function addMarker(i,c_point,content){
		  var marker = new BMap.Marker(c_point);
		  map.addOverlay(marker);
		  if(i==0){
		    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		    
	    	//panTo()方法将让地图平滑移动至新中心点 如果移动距离超过了当前地图区域大小，则地图会直跳到该点
		    window.setTimeout(function(){  
			  map.panTo(c_point);    
			}, 1000); 
	    
		  }
			addClickHandler(content,marker);
		}
	
		
		function addClickHandler(content,marker){
			marker.addEventListener("click",function(e){
				openInfo(content,e)}
			);
		}
		
		function openInfo(content,e){
			var p = e.target;
			var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
			var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
			map.openInfoWindow(infoWindow,point); //开启信息窗口
		}
	
	}
	
	/* 为多个点 添加信息窗口 结束 */	
	
	
							
/*	setTimeout(function(){
		map.panTo(new BMap.Point(113.262232,23.154345));   //两秒后移动到广州
		
		setTimeout(function(){
			map.setZoom(11);   
		}, 2000);  //2秒后放大到11级
		
	}, 2000);*/
</script>