地图对接汇总(百度地图) -

XinTeng2012

浏览: 94678 次

最近访客更多访客>>

andrew7676

u012363178

linqlou

mp8719898

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

地图对接汇总(百度地图)

最近再做一个项目需要用户地图定位功能，因此研究了一下百度地图的功能。

多了不说上代码：

php版

<span style="font-family:Microsoft YaHei;font-size:14px;"><html>
    <head>        
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>百度地图搜索</title>
		<script type="text/javascript" src="http://mapclick.map.baidu.com/data/98_36_11_018.js"></script>
        <script type="text/javascript" 
			src="http://api.map.baidu.com/api?v=1.5&ak=1jwM1UGS8wPTvaiUSUaUnuOG"></script>
    </head>
    <body>
        <div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
        
		要查询的地址：<input id="text_" type="text" value="山东济南泉城广场" style="margin-right:100px;"/>
        查询结果(经纬度)：<input id="result_" type="text" />
        <input type="button" value="地址查询经纬度" onclick="searchByStationName();"/>
		
		<div id="r-result">
		城市名: <input id="cityName" type="text" style="width:100px; margin-right:10px;" />
				<input type="button" value="查询" onclick="theLocation()" />
		</div>
		<div id="results" style="font-size:13px;margin-top:10px;"></div>
	</body>
</html>
<script type="text/javascript">

    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
	map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
	map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
	//为了使用地图更加方便，我们还可以添加上缩放的平移控件，以及地图的缩略图控件，并设置他要显示的位置：
	map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
	map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
	map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));   //右下角，打开
	
    //var local = new BMap.LocalSearch(map, {
    //    renderOptions: {map: map, panel: "results"}
    //});
    //var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: map.getCenter()};
    ////var opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(10, 10)};
    //map.addControl(new BMap.NavigationControl(opts));
    
	//local.search("北京市海淀区上地地铁站");
	
	
	
	//1.构建搜索
	var localSearch = new BMap.LocalSearch(map);
	localSearch.enableAutoViewport(); //允许自动调节窗体大小
	//2.开始做最关键的一步了，就是获取地址的具体经纬度：
	var searchByStationName = function(){
		var keyword = document.getElementById("text_").value;
		//搜索回调方法
	　　localSearch.setSearchCompleteCallback(function (searchResult) {
			alert(searchResult);
	　　　　var poi = searchResult.getPoi(0);
	　　　　document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat; //获取经度和纬度，将结果显示在文本框中
	　　　　map.centerAndZoom(poi.point, 13);
	　　});
	　　localSearch.search(keyword);
	}
	
	
	/**********************************
	***********百度地图API功能*********
	**********************************/
	//1.城市名定位
	//var map = new BMap.Map("allmap");
	//var point = new BMap.Point(116.331398,39.897445);
	//map.centerAndZoom(point,11);

	function theLocation(){
		var city = document.getElementById("cityName").value;
		if(city != ""){
			map.centerAndZoom(city,11);      // 用城市名设置地图中心点
		}
	}
	
	//2.IP定位获取当前城市
	function myFun(result){
		var cityName = result.name;
		map.setCenter(cityName);
		alert("当前定位城市:"+cityName);
	}
	var myCity = new BMap.LocalCity();
	myCity.get(myFun);
	
	//3.单击获取点击的经纬度
	//单击获取点击的经纬度
	var longitude = "";//经度
	var latitude = "";//纬度
	map.addEventListener("click",function(e){
		alert("经度:"+e.point.lng + "," + "纬度:" +e.point.lat);
		longitude = e.point.lng;
		latitude = e.point.lat;
		if(longitude != "" && latitude != ""){
			map.clearOverlays(); 
			var new_point = new BMap.Point(longitude,latitude);
			var marker = new BMap.Marker(new_point);  // 创建标注
			map.addOverlay(marker);              // 将标注添加到地图中
			map.panTo(new_point);
			marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		}
	});
	
	
	//4 用经纬度设置地图中心点
	/*function theLocation(){
		if(longitude != "" && latitude != ""){
			map.clearOverlays(); 
			var new_point = new BMap.Point(longitude,latitude);
			var marker = new BMap.Marker(new_point);  // 创建标注
			map.addOverlay(marker);              // 将标注添加到地图中
			map.panTo(new_point);
		}
	}*/
	
	//5.逆地址解析,点击地图展示详细地址
	var geoc = new BMap.Geocoder();    

	map.addEventListener("click", function(e){        
		var pt = e.point;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
		});        
	});
</script>
</span>

附上baidu地图APIdemo地址：http://developer.baidu.com/map/jsdemo.htm

分享到：