百度地图获取经纬度的示例

  •   
  • 8115
  • jQuery
  • 4
  • super_dodo
  • 2014/03/14

承接上一篇根据经纬度的显示，该文章用来设置经纬度。经纬度依赖于百度地图获取。同时该文使用的fancybox来弹出层展示百度地图。请根据你的相应的文件目录来引入你的对应的js组件.

效果图如下:
百度地图获取经纬度的示例

完整代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>百度地图获取经纬度的示例</title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
	<script type="text/javascript" src="assets/js/jquery-1.7.2.js"></script>
	<script type="text/javascript" src="assets/js/jquery-ui.js"></script>
	<script type="text/javascript" src="assets/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="assets/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
</head>
<body>

<form action="" method="post" id="post_form">
	<p>企业经纬度</p>
	<p>
		<a id="various1" href="#inline1">
			<input readonly name="map" type="text" id="map" value="" />
		</a>
	</p>
</form>

<!--百度地图html代码-->
<div style="display:none;">
	<div id="inline1" style="width:800px;">
		<div style="width:795px;height:380px;border:1px solid #ccc" id="container"></div>
		<input id="maptxt" name="maptxt" type="" value=""/><input onclick="setmapValue()" name="button" type="button" value="设置"/>
		<span style="font-family:'Microsoft Yahei';">滚动鼠标->缩放地图大小,鼠标拖动->上下左右移动地图</span>
	</div>
</div>

<script type="text/javascript">
	//弹出层显示百度地图 --fancybox
	$("#various1").fancybox({
		'titlePosition': 'inside',
		'transitionIn': 'none',
		'transitionOut': 'none'
	});

	<!--baiduMap -->
	var map = new BMap.Map("container");
	var lntAndLog=$('#map').val().split(",");
	map.centerAndZoom(new BMap.Point(lntAndLog[0],lntAndLog[1]), 12);
	map.enableScrollWheelZoom(true); 
	map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));    //左上角，默认地图控件 

	var myCity = new BMap.LocalCity();			//实例化本地地图,基于IP地址
	myCity.get(myFun);
	map.clearOverlays();
	
	var marker1 = new BMap.Marker(new BMap.Point(lntAndLog[0],lntAndLog[1]));		//创建标注
	map.addOverlay(marker1);
	
	function showInfo(e){
		map.clearOverlays();
		var marker1 = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));	//创建标注
		map.addOverlay(marker1); 
		document.getElementById("maptxt").value=e.point.lng + "," + e.point.lat;
	}
	
	map.addEventListener("click", showInfo);
	
	//设置经纬度
	function setmapValue(){
		if($("#maptxt").val()==""){
			alert('你还没选择相应的坐标点^_^哦');
			return false;
		}
		$("#map").val($("#maptxt").val());
		$('#fancybox-close').click();
	}
	
	//IP定位获取当前城市
	function myFun(result){
		var cityName = result.name;
		map.setCenter(cityName);
	}
	<!--baiduMap -->
</script> 
</body>
</html>

【带搜索功能的示例代码】

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>百度地图获取经纬度的示例</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 <script type="text/javascript" >
</script>
</head>
<body> 
 
<form action="" method="post" id="post_form">
    <p>企业经纬度----带搜索功能</p>
    <p>
        <a id="various1" href="#inline1">
            <input readonly name="map" type="text" id="map" value="" />
        </a>
    </p>
</form>
 
<!--百度地图html代码-->
<div style="display:none;">
	<div id="inline1" style="width:800px;">
		<table>
			<tr>
				<td><input id="where" name="where" type="text"></td>
				<td><input type="button" value="地址搜索" onClick="sear(document.getElementById('where').value);" /></td>
				<td><span style="font-size:6px;color:red; font-family:'Microsoft Yahei';"><b>提示：</b>搜到地址后用鼠标单击地点标注即可在坐标设置框获取坐标值，如果未找到您想要的地址可以在地图的相应点双击鼠标生成标注再设置坐标。</span></td>
			</tr>
		</table>
		<div style="width:795px;height:380px;border:1px solid #ccc" id="container"></div>
		<input id="maptxt" name="maptxt" type="" value=""/>
		<input onclick="setmapValue()" name="button" type="button" value="坐标设置"/>
		<span style="font-family:'Microsoft Yahei'; font-size:16px;color:red;">滚动鼠标->缩放地图大小,鼠标拖动->上下左右移动地图</span>
	</div>
</div>
 
<script type="text/javascript">
    //弹出层显示百度地图 --fancybox
    $("#various1").fancybox({
        'titlePosition': 'inside',
        'transitionIn': 'none',
        'transitionOut': 'none'
    });
 
    <!--baiduMap -->
    var map = new BMap.Map("container");
    map.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式
    var lntAndLog=$('#map').val().split(",");
    map.centerAndZoom(new BMap.Point(lntAndLog[0],lntAndLog[1]), 12);
   	
    map.enableScrollWheelZoom(true); 
    map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));    //左上角，默认地图控件 
 
    var myCity = new BMap.LocalCity();          //实例化本地地图,基于IP地址
    myCity.get(myFun);
    map.clearOverlays();
     
    var marker1 = new BMap.Marker(new BMap.Point(lntAndLog[0],lntAndLog[1]));       //创建标注
    map.addOverlay(marker1);
     
    function showInfo(e){//创建狐狸标注并获取坐标
       	map.clearOverlays();//清除地图上的覆盖物
        var marker1 = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));    //创建标注
         map.addOverlay(marker1); 
        document.getElementById("maptxt").value=e.point.lng + "," + e.point.lat;
    }
     
    map.addEventListener("dblclick", showInfo);		//地图双击鼠标事件  
    map.addEventListener("click", function(e){		//地图单击事件
		document.getElementById("maptxt").value = e.point.lng + ", " + e.point.lat;
	});

	function sear(result){//地图搜索
		var local = new BMap.LocalSearch(map, {
			renderOptions:{map: map}
		});
		local.search(result);
	}     

    //设置经纬度
    function setmapValue(){
        if($("#maptxt").val()==""){
            alert('你还没选择相应的坐标点^_^哦');
            return false;
        }
        $("#map").val($("#maptxt").val());
        $('#fancybox-close').click();
    }
     
    //IP定位获取当前城市
    function myFun(result){
        var cityName = result.name;
        map.setCenter(cityName);
    }
    <!--baiduMap -->
</script> 
</body>
</html>

相关链接:百度地图插件的使用示例–展示经纬度

Live in the present. Value what you have. 活在当下，珍惜拥有！