百度地图插件的使用示例–展示经纬度

  •   
  • 4473
  • jQuery
  • 2
  • super_dodo
  • 2014/03/14

最近项目需要用到百度地图，且需要根据经纬度定位出该用户的信息地理位置.获取经纬度的方法请见另一篇。该篇幅主要展示，假设已经获得的经纬度，之后展示在页面上。

图片展示信息如下：
百度地图的使用示例

代码如下：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>百度地图插件的使用示例</title>
</head>
<body>

<?php
	$compMap = "103.773618,25.538128";				//得到公司的经纬度--该地址为云南省曲靖市
	$compName = "爱曲靖";							//得到公司的名称
	$compAddr = "曲靖市";							//得到公司的地址
	$mapArr = array("1"=>"103.772612,25.536694","2"=>"103.772684,25.534868");	//得到打卡的经纬度
?>

<!--baiduMap -->
<style> #baiduMap{width:100%;height:500px;margin:10px;padding:10px;} </style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> 
<div id="baiduMap"></div>
<script type="text/javascript">
	var map = new BMap.Map("baiduMap");											//实例化地图
	map.centerAndZoom(new BMap.Point(<?php echo $compMap;?>), 14);				//公司的经纬度
	map.enableScrollWheelZoom(true); 											//启动鼠标滚轮操作
	map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));    //左上角,默认地图控件 

	var myCity = new BMap.LocalCity();		//得到当前城市的信息--定位当前城市
	//myCity.get(myFun);
	map.clearOverlays();

	//设置公司地址的信息
	var compMap = new BMap.Point(<?php echo $compMap;?>);
	var compMarker = new BMap.Marker(compMap);
	map.addOverlay(compMarker);
	var compMsg = "<p><?php echo $compName;?></p><p><?php echo $compAddr;?></p>";
	var compWindow = new BMap.InfoWindow(compMsg);		//弹出层的提示信息
	compMarker.addEventListener("click", function(){
		this.openInfoWindow(compWindow);
	});

	//若多个点的话则在此循环遍历
	<?php foreach($mapArr as $k=>$mapStr){ $map = explode(',',$mapStr); ?>
		var pt_<?php echo $k;?> = new BMap.Point(<?php echo $map&#91;0&#93;;?>,<?php echo $map&#91;1&#93;;?>);
		var marker_<?php echo $k;?> = new BMap.Marker(pt_<?php echo $k;?>);
		map.addOverlay(marker_<?php echo $k;?>);
		var alertMsg_<?php echo $k;?> = "<p>姓名:<?php echo $k;?></p>";
		alertMsg_<?php echo $k;?> += "<p>时间:<?php echo $k;?></p>";
		var infoWindow_<?php echo $k;?> = new BMap.InfoWindow(alertMsg_<?php echo $k;?>);		//弹出层的提示信息
		marker_<?php echo $k;?>.addEventListener("click", function(){
			this.openInfoWindow(infoWindow_<?php echo $k;?>);
		});
	<?php } ?>

	function myFun(result){				//IP定位获取当前城市
		var cityName = result.name;		//城市的名字
		map.setCenter(cityName);		//定位到城市的中心
	}
</script>
<!--baiduMap-->
</body>
</html>

代码无需改动即可使用。有问题请指出。谢谢。。

相关链接:百度地图获取经纬度的示例

想必是已经老了，再如何拼命回忆，仍无法想起，当初来地球的目的……