还记得上学的时候曾做过公交查询系统,也曾听老师说过可以调用百度地图的api, 可是那时候根本不知道什么是百度地图api,也不知道到底要怎么调用,这个事一直记在心里,工作的时候也不愿去触碰这一块的,觉得应该很难,最近想探索一下,所以把自己的心得记录下来吧。首先先在百度上申请一个自己的key 链接 http://lbsyun.baidu.com/apiconsole/key
调用百度地图 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=key"></script>
参考百度地图demo http://developer.baidu.com/map/jsdemo.htm#a1_2
html
<div style=" 800px;height: 600px;margin: 5px auto" id="allmap"></div>
js 添加标注
var map = new BMap.Map("allmap"); //百度地图api功能 var myIcon = new BMap.Icon("http://www.luyou666.com/content/images/map_icon.png", new BMap.Size(24, 35)); //标注图标 var point = new BMap.Point(lng,lat); //设置中心点坐标 var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
js 定位到当前位置
var map = new BMap.Map("allmap"); //百度地图api功能 var geoc = new BMap.Geocoder(); //位置解析器 // 根据ip定位 function myFun(result) { geoc.getLocation(result.point, function(rs) { //解析位置 alert(rs.address); //根据ip定位的具体位置 var myIcon = new BMap.Icon("http://www.luyou666.com/content/images/map_icon.png", new BMap.Size(24, 35)); //标注图标 var point = new BMap.Point(result.point.lng, result.point.lat); //设置中心坐标 var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 }); } var myAddress = new BMap.Geolocation(); //获取本地城市位置 myAddress.getCurrentPosition(myFun); //获取用户的位置
js 点击事件
var map = new Bmap.Map("allmap"); //百度地图api功能 var geoc = new BMap.Geocoder(); //位置解析器 map.addEventListener("click", setstartplace); //添加点击事件 function setstartplace(e) { var allOverlay = map.getOverlays(); for (var i = 0; i < allOverlay.length; i++) { map.removeOverlay(allOverlay[i]); } var marker = new BMap.Marker(e.point, { icon: myIcon }); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.enableDragging(); var pt = e.point; geoc.getLocation(pt, function(rs) { $("#startaddress").html(rs.address); }); }