创新路
我们一直在努力

百度地图API开发总结

首先:注册百度账号,获取密码,引用在页面中。

注:百度地图里面很多功能感觉都实用的,大家可以去看看 api示例地址:http://lbsyun.baidu.com/jsdemo.htm#i6_2

我下面简单列举额几个事件:

1.定位

  定位主要分为三种定位:浏览器定位、根据浏览器定位。

1.地图加载完成事件

     <script type="text/javascript">

// 百度地图API功能

var map = new BMap.Map("allmap"); //创建Map实例

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); //初始化地图(设置城市名和地图缩放级别)

map.addEventListener("tilesloaded",function(){alert("地图加载完毕");});

     </script>

3.点击地图事件

  事例代码:点击显示当前经纬度

     <script type="text/javascript">

// 百度地图API功能

var map = new BMap.Map("allmap"); //创建Map实例

map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); //初始化地图(设置城市名和地图缩放级别)

function showInfo(e){//点击后发生时间

alert(e.point.lng + ", " + e.point.lat);

}

map.addEventListener("click", showInfo);//设置点击事件

     </script>

 

以下是我实现的小功能:获取当前定位,点击地图获取当前地址信息,搜索地址标注在地图上

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

<title>获取当前定位,点击地图获取当前地址信息,搜索地址标注在地图上</title>

</head>

<body>

<input type="text" id="address"/>

<input type="button" value="地图查看" onclick="showMap();"/>

<div id="lnglat" style="color:red;"></div>

<div id="allmap" style="width:400px; height:400px; overflow:hidden; margin:0;"></div>

<script type="text/javascript">

/**

 * 百度地图API功能

 */

var map = new BMap.Map('allmap');              //创建Map实例

map.centerAndZoom("成都市", 12);              //初始化地图(设置城市名和地图缩放级别)

map.addControl(new BMap.NavigationControl());  //添加平移缩放控件

map.addControl(new BMap.ScaleControl());       //添加比例尺控件

map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

map.enableScrollWheelZoom();                   //启用滚轮放大缩小

map.disableDoubleClickZoom(); //禁用双击放大地图

//map.disableDragging();                       //禁止地图拖拽

//map.enableDragging();                        //允许地图拖拽(默认为允许)

var geolocation = new BMap.Geolocation();

geolocation.getCurrentPosition(function(r){

console.log('浏览器定位的状态码为:' + this.getStatus());

if(this.getStatus() == BMAP_STATUS_SUCCESS){

var mk = new BMap.Marker(r.point);

map.addOverlay(mk);

map.panTo(r.point);

//document.getElementById('lnglat').innerHTML = '当前坐标:' + r.point.lng + ", " + r.point.lat;

var pt = r.point;

var geoc = new BMap.Geocoder(); 

geoc.getLocation(pt, function(rs){

var addComp = rs.addressComponents;

document.getElementById('address').value =addComp.province+addComp.city+addComp.district+addComp.street+addComp.streetNumber;

nowcity=addComp.city;

})

}else{

//switch(this.getStatus()){

// case 6 : document.getElementById('lnglat').innerHTML = '请求未授权,无法提供定位服务'; break;

// default: document.getElementById('lnglat').innerHTML = '无法获取当前位置,您可移动地图查看'; break;

//}

new BMap.LocalCity().get(function(result){

console.log('IP定位获取当前城市:' + result.name);

map.setCenter(result.name);

});

}

},{enableHighAccuracy:true});

map.addEventListener("click", showInfo);

function showInfo(e){

map.clearOverlays(); 

var marker = new BMap.Marker(e.point); //创建标注

map.addOverlay(marker);              //将标注添加到地图中

marker.enableDragging();             //设置标注可拖拽(默认为不可拖拽)

//document.getElementById('lnglat').innerHTML = '当前坐标:' + e.point.lng + ", " + e.point.lat;

var pt = e.point;

var geoc = new BMap.Geocoder(); 

geoc.getLocation(pt, function(rs){

var addComp = rs.addressComponents;

document.getElementById('address').value = addComp.province+addComp.city+addComp.district+addComp.street+addComp.streetNumber;

}); 

}

/**

 * 地图查看

 */

function showMap(){

var address = document.getElementById('address').value;

if('' == address){

document.getElementById('lnglat').innerHTML = '请输入地址';

return;

}

//创建地址解析器实例

var myGeo = new BMap.Geocoder();

//将地址解析结果显示在地图上,并调整地图视野

myGeo.getPoint(address, function(point){

if(point){

map.centerAndZoom(point, 16);

map.clearOverlays();                 //清除地图上所有的标记(map.removeOverlay(marker)可清除单个标注)

var marker = new BMap.Marker(point); //创建标注

map.addOverlay(marker);              //将标注添加到地图中

marker.enableDragging();             //设置标注可拖拽(默认为不可拖拽)

//百度坐标是先经度,再纬度,即Point(lng, lat)

//谷歌坐标的顺序与百度恰好相反,是(lat, lng)

//也可这样获取坐标——————–>marker.getPosition().lng和marker.getPosition().lat;

//document.getElementById('lnglat').innerHTML = '当前坐标:' + point.lng + ", " + point.lat;

//监听标注的拖拽事件,以便实时获取标注拖拽后的坐标

marker.addEventListener('dragend', function(e){

//document.getElementById('lnglat').innerHTML = '当前坐标:' + e.point.lng + ", " + e.point.lat;

});

}

}, nowcity);

}

</script>

</body>

</html>

未经允许不得转载:天府数据港官方信息博客 » 百度地图API开发总结

客官点个赞呗! (1)
分享到:

评论 抢沙发

评论前必须登录!

天府云博 - 做有态度的开发&运维&设计学习分享平台!

联系我们百度云主机