百度地图api

关于百度地图api的应用实例

1.准备工作

​ 1.进入百度地图官网：http://lbsyun.baidu.com/。申请百度地图api使用的秘钥，开源免费的！！！

​ 2.点击控制台

​ 3.点击右侧应用管理–》我的应用

​ 4.点击创建应用

​
​ 5.填写信息完成创建

6.创建完成后就可以在我的应用中看到创建的应用，并得到秘钥

2.引用地图实例–定位当前位置

<!--这是css样式，根据需要自己改动-->
<style type="text/css">
        #allmap {width: 630px;height: 400px;overflow: hidden;margin:0;font-family:"微软雅黑";}
 </style>
<!--引入百度地图api 秘钥换成自己申请的-->
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

<!--在页面你需要的地方定义一个div，空的就可以 id是为了api可以控制到，类似于vue通过id接管区域-->
<div id="allmap"></div>

// 百度地图API功能，获取当前位置
// 注意：谷歌浏览器获取的定位有误差，使用火狐浏览器比较准
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);
	var geoc = new BMap.Geocoder();
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			alert('您的位置：'+r.point.lng+','+r.point.lat)
		}
		else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true}),
	map.enableScrollWheelZoom(true);
</script>

3.获取拾取点的坐标和位置信息

<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);
	var geoc = new BMap.Geocoder();
    
   //通过鼠标在地图上拾取点，并获取经纬度和位置信息
    var mk;
	map.addEventListener("click",function(e){
        //清除地图上的所有标记点
		map.removeOverlay(mk);
		var pt = e.point;
       //获取点击的点
		map.panTo(pt);
		mk = new BMap.Marker(pt);
       //在地图上标记选取的点
		map.addOverlay(mk);
       //标记点信息弹框
		geoc.getLocation(pt, function (rs) {
			var addComp = rs.addressComponents;
            //逆坐标转换，将经纬度转换成可读的位置信息
			bdaddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
		  /*  alert(bdaddress);*/
			var opts = {
				width: 270,     // 信息窗口宽度
				height: 70,     // 信息窗口高度
				title: "当前位置："  // 信息窗口标题
			};
			var infoWindow = new BMap.InfoWindow(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber, opts);
			map.openInfoWindow(infoWindow, pt); //开启信息窗口
			mk.addEventListener("click", function () {
				map.openInfoWindow(infoWindow, pt);
			});
			bdcoordinate = rs.point.lng+','+rs.point.lat;
			handleData();
		});
	});

	//定位方法
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			alert('您的位置：'+r.point.lng+','+r.point.lat)
		}
		else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true}),
	map.enableScrollWheelZoom(true);
</script>

(‘failed’+this.getStatus());
}
},{enableHighAccuracy: true}),
map.enableScrollWheelZoom(true);