百度地图

作者: Daeeman | 来源:发表于2020-04-15 19:17 被阅读0次

1. 基本用法

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
  html{height:100%}  
  body{height:100%;margin:0px;padding:0px}  
  #container{height:100%}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">
//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");
// 创建地图实例  
var point = new BMap.Point(116.404, 39.915);
// 创建点坐标  
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别  
</script>  
</body>  
</html>

1. 适应移动端页面展示

下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。

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

2. 设置容器样式

<style  type="text/css">
 html{height:100%}
 body{height:100%;margin:0px;padding:0px} 
 #container{height:100%} 
</style>

3. 引用百度地图API文件

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

4. 创建地图容器元素

<div  id="container"></div>

5. 创建地图实例

位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

var map =  new  BMap.Map("container");

注意：
命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。

6. 设置中心点坐标

var point = new BMap.Point(116.404, 39.915);

注意：在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法！！！

7. 地图初始化，同时设置地图展示缩放级别

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。

map.centerAndZoom(point, 15);

添加控件

addMapCtrl();
        // 添加地图控制 
        function addMapCtrl(){
            map.enableScrollWheelZoom(true);                //地图可以缩放,鼠标滚轮
            map.addControl(new BMap.NavigationControl());   // 地图导航
            map.addControl(new BMap.ScaleControl());        // 缩放控件
            map.addControl(new BMap.OverviewMapControl());  //概况
            map.addControl(new BMap.MapTypeControl());      //地图类型
        }

2. 添加标注（覆盖物）

a. 小图标

<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);
    // 添加标注到地图
</script>

b. 圆

        var circle = new BMap.Circle(
            point,
            // 中心点位置
            500,
            // 半径
            {strokeColor:"blue",strokeWeight:2,strokeOpacity:0.5,fillOpacity:0.4})
            // stroke边框  fill 填充   Opacity透明度
        map.addOverlay(circle);

c. 多边形

        var polygon = new BMap.Polygon([
            new BMap.Point(113.6729090076618, 34.792850585314234),
            new BMap.Point(113.67341716599596, 34.780524355204825),
            new BMap.Point(113.65634304596864, 34.78010506298753),
            new BMap.Point(113.64841577595597, 34.79184443213241)
        ],
        // 多边形顶点
        {strokeColor:"orange",strokeWeight:2,strokeOpacity:0.5,fillColor:'blue',fillOpacity:0.1})
        // 边框填充颜色与透明度
        map.addOverlay(polygon);

d. 折线

       var marker = new BMap.Marker(point,{icon:Icon})
        // 创建一个标注
        map.addOverlay(marker);
        // 添加标注到地图
        // 地图事件
        map.addEventListener("click",e=>{
            console.log(e);
            console.log(e.point);
            let marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat))
            map.addOverlay(marker);
            // 单击在页面中添加一个点
            // point 就是当前的经度纬度
        })

        let line = new BMap.Polyline([
            new BMap.Point(113.665, 34.784),
            new BMap.Point(113.66478440667755, 34.78598630008208),
            new BMap.Point(113.66747932320749, 34.78672745622025),
            new BMap.Point(113.66823389983587, 34.7868905096687),
            new BMap.Point(113.66832373038686, 34.787587188920526),
            new BMap.Point(113.66909627312545, 34.78763165760732),
        ],{strokeColor:"red",strokeWidth:2})
        map.addOverlay(line);

3. 信息窗口+搜索窗口

<input type="text" onblur="blurHd(this)"/>  
<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);
        let str = `<div class="info"><p>一入前端深似海<p></div> `;
            var info = new BMap.InfoWindow(
            str,
            {title:'web前端大本营'})
            marker.addEventListener("click",()=>{
                map.openInfoWindow(info,point)
        })
        map.openInfoWindow(info,point);
    // 创建一个标注
    map.addOverlay(marker);


    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
    });
    local.search("景点");  

    function blurHd(e){
        local.search(e.value);  
    }
    // 添加标注到地图
    </script>

4. 路径规划

var end = null;

// map.addOverlay(polygon);
map.addEventListener("click",e=>{
    console.log(e.point);
    end = new BMap.Point(e.point.lng,e.point.lat);
    // 单击获取结束的点；
    
    driving.search(point,end)
    // 查找两个点的路径
})
//  规划两个点的行车，公交，步行的路线
var driving = new BMap.DrivingRoute(map,{
    renderOptions:{map:map,autoViewport:true}
})

5. api 接口

    var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
    });
//  通过百度api 获取当前的城市
  $(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);
          }
      })
  })

//  通过百度api 获取当前的城市

  $(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 发生改变时候 再发起ajax请求
    $("#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
    })
  })

网友评论

前端

本文标题：百度地图

本文链接：https://www.haomeiwen.com/subject/auiqvhtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！