百度地图开发基础

创建应用步骤：
1.查找到百度地图开发平台，点击进入；
2.第一次进入需要输入账号和密码，登录成功后，进入到控制台；找到应用管理，在我的应用，点击创建应用；
3.跳转到创建应用界面，输入应用名称、选择应用类型（一般为浏览器端）和启用服务，输入域名白名单，然后点击提交；
4.这时会在应用表格中，生成一条新记录，有对应的应用编号、应用名称和访问应用（AK）等；
5.点击右上角的开发文档，选择Web开发下的JavaScript API v3.0；
6.在JavaScript API界面，可以查看到服务介绍、开发指南、类参考、示例DEMO等；
7.可根据官方文档自己创建地图；

使用步骤
初始化地图并设置地图中心店

var map = new BMap.Map("allmap");    // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
 
当然也可以根据城市名称设置地图的中心点：
map.centerAndZoom("上海",15);  

map.addControl(new BMap.ScaleControl());    //添加左下方比例尺控件
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
map.setCurrentCity("北京");          // 设置地图显示的城市

拖拽地图与滚轮的使用

map.enableScrollWheelZoom(true);
map.disableDragging();     //禁止拖拽
map.enableScrollWheelZoom();    //启用滚轮放大缩小

移动地图，设置地图最大最小的缩放级别

var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别
 
//当然也可以动态设置级别：
map.setMaxZoom(10);
map.setMinZoom(2);

获得地图中心点，返回两点之间的距离

getCenter()
getDistance(start:Point, end:Point)
var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区
var pointB = new BMap.Point(106.581515,29.615467);  // 创建点坐标B--江北区
alert('距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位

信息窗口

var opts = {    
 width : 250,     // 信息窗口宽度    
 height: 100,     // 信息窗口高度    
 title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    
map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
map.addOverlay(marker);              // 将标注添加到地图中
    map.centerAndZoom(point, 15);
    var opts = {
      width : 200,     // 信息窗口宽度
      height: 100,     // 信息窗口高度
      title : "海底捞王府井店" , // 信息窗口标题
      enableMessage:true,//设置允许信息窗发送短息
      message:"点击链接看地址"
    }
    var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
    marker.addEventListener("click", function(){          
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    });

添加复杂的信息窗口

var polyline = new BMap.Polyline([    
   new BMap.Point(116.399, 39.910),    
   new BMap.Point(116.405, 39.920),
...
 ],    
 {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}    
);    
map.addOverlay(polyline);

控件工具的创建与开关

var map = new BMap.Map("container");    
var myDis = new BMapLib.DistanceTool(map);
myDis.open()
myDis.close()

设置api接口，根据输入内容搜索相关地点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图开发6</title>
    <style>
        #container{
            width: 100%;
            height: 500px;
        }
        .search{ position: relative;}
        .tip{position: absolute; top:30px; background-color: #fff; z-index: 10000000;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde"></script>
    <!-- 引入js，填入ak -->
    <script src="jquery-3.4.1.js"></script>
</head>
<body>
    <h1></h1>
    <div class="search">
        <input type="text"  id="searchbox">
        <div class="tip"></div>
    </div>
    
    <div id="container">  </div>
    <!-- 地图的容器 -->

    <script>
        var map = new BMap.Map("container");
        //初始化地图
        var point = new BMap.Point(113.665,34.784);
        //指定地图的中心点（经度，维度）
        map.centerAndZoom(point,16);
        //地图指定中旬和缩放层次
        map.enableScrollWheelZoom(true);                //地图可以缩放

         //自定义标注
         let Icon = new BMap.Icon('./assets/start_point.png',
         //图片地址
         new BMap.Size(36,42),
         //显示图片大小
         {imageSize:new BMap.Size(36,42),anchor:new BMap.Size(18,42)})
        // 把原始图片缩小到36,42  偏移到底部中心区域（默认左上角）

        var marker = new BMap.Marker(point,{icon:Icon});
        //创建一个标注
        map.addOverlay(marker);
        //添加标注到地图

    
        var local = new BMap.LocalSearch(map,{
            renderOptions:{map:map,autoViewport:true}
        });

       $(function(){
           $.ajax({
               url:'http://api.map.baidu.com/location/ip?ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde&ip=&coor=bd09ll&output=jsonp',
               dataType:"jsonp",
               success:function(res){
                   console.log(res);
                   $("h1").html(res.content.address);
               }
           })
           
       $("#searchbox").on("input",function(){
           //显示tip
           $(".tip").show();
           $.ajax({
               url:`http://api.map.baidu.com/place/v2/suggestion?query=${$("#searchbox").val()}&region=郑州&city_limit=true&output=json&ak=I5p02PxH5e459CAk9vt4elbXNTkgfxde`,
               dataType:"jsonp",
               success:function(res){
                   console.log(res);
                   $(".tip").html(res.result.map(item=>`<p>${item.name}</p>`).join(''));
                   //设置tip的内容为result数组返回成p元素，连接字符串
               },
           })
       })
       $(".tip").on("click","p",function(){
           local.search($(this).text());
           //执行地图搜索 为当前单击的p标签
           $(".tip").hide();
           //隐藏tip
       })
 })
    </script>
</body>
</html>

webblock

发布了22 篇原创文章 · 获赞 17 · 访问量 457

私信关注

百度地图开发基础

猜你喜欢