百度地图点击获取经纬度

有个小伙伴提出要我帮忙写一个关于点击百度地图上任意位置，获取点击位置的建维度的demo，最近项目里并没有设计到，所以从网上查了一下，帮他写了一下。虽然不难，但是做个备份吧，说不定哪天能用上呢！
具体实现思路：

• 引入百度api的js文件
• 根据百度地图api提供的方法，初始化一个地图
• 增加自己需要的组件
• 增加地图点击事件获取经纬度并赋值到输入框里面
• 增加地图搜索输入框并绑定搜索功能
• 增加根据input获取焦点打开地图的显示隐藏，并且赋值到输入框里面
  下面是代码：

HTML

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script><div>	经度：<input id="lonlat" name="lonlat" type="number" maxlength="10" onfocus="showBmap()"></br>	纬度：<input id="lonlat2" name="lonlat2" type="number" maxlength="9" onfocus="showBmap()">	<div class="BmapBox" id="BmapBox">		<div style=" margin:auto;width:600px;height:400px;border:1px solid #cdc;" id="container"></div>				<label>输入地点：</label>		<input id="where" name="where" type="text" placeholder="请输入地址">		<input id="but" type="button" value="地图查找" onClick="sear(document.getElementById('where').value);" /></br>	</div></div>

js

//如果经纬度没有给个默认值,定位到当前位置var longitude = 116.403909;var latitude = 39.915774;var map = new BMap.Map("container");//改变鼠标指针默认样式为十字map.setDefaultCursor("crosshair");//滚轮默认事件map.enableScrollWheelZoom();var point = new BMap.Point(longitude, latitude);//生成地图map.centerAndZoom(point, 13);var gc = new BMap.Geocoder();//增加缩放加减及平移按钮map.addControl(new BMap.NavigationControl());//增加右下角缩略图按钮map.addControl(new BMap.OverviewMapControl());//增加比例尺map.addControl(new BMap.ScaleControl());//增加地图类型map.addControl(new BMap.MapTypeControl());var marker = new BMap.Marker(point);map.addOverlay(marker);//点击获取经纬度坐标事件marker.addEventListener("click",	function(e) {		document.getElementById("lonlat").value = e.point.lng;		document.getElementById("lonlat2").value = e.point.lat;		document.getElementById("BmapBox").style.display = "none";	});//点击获取标记点坐标事件map.addEventListener("click",	function(e) {		document.getElementById("lonlat").value = e.point.lng;		document.getElementById("lonlat2").value = e.point.lat;		document.getElementById("BmapBox").style.display = "none";	});// 搜索function sear(result) {	var local = new BMap.LocalSearch(map, {		renderOptions: {			map: map		}	});	local.search(result);}// 点击地图展开function showBmap() {	document.getElementById("BmapBox").style.display = "block";}

css样式

#where,#lonlat,#lonlat2 {	width: 300px;	height: 24px;	color: blue;	vertical-align: middle;	padding-left: 10px;}#but {	width: 100px;	height: 28px;	font-size: 16px;	line-height: 28px;	vertical-align: middle;}.BmapBox {	position: fixed;	display: none;	height: 450px;	width: 600px;	top: 50%;	left: 50%;	margin-left: -300px;	margin-top: -225px;}