百度地图Api

还记得上学的时候曾做过公交查询系统,也曾听老师说过可以调用百度地图的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);         

});   

  }
原文地址:https://www.cnblogs.com/llxy/p/4212631.html