• 百度地图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);         
    
    });   
    
      }
  • 相关阅读:
    Mysql删除数据库中所有表
    MySQL出现2059错误
    .NetCore笔记
    PLSql中文乱码
    Oracle误删除数据恢复。Oracle删除后恢复数据
    ora-28000:the account is locked,Oracle修改密码有效期,Oracle设置密码不过期
    Linux 常用命令
    Razor
    ORA-01578: ORACLE 数据块损坏 (文件号 13, 块号 2415081) ORA-01110: 数据文件XXXXXX
    ORA-01033:ORACLE initialization or shutdown
  • 原文地址:https://www.cnblogs.com/llxy/p/4212631.html
Copyright © 2020-2023  润新知