Bruce Chen's Blog

quick notes

0%

百度地图使用笔记

发表于 分类于

地图级别控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 百度地图API功能
var map = new BMap.Map("allmap", {enableMapClick:false});//构造底图时，关闭底图可点功能

// 初始化地图,设置中心点坐标(城市名)和地图级别
map.centerAndZoom("上海",15);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

// 移动地图到中心点
map.panTo(new BMap.Point(113.262232,23.154345));

// 设置缩放级别
map.setZoom(14);

// 开启地图缩放
map.enableScrollWheelZoom();

// 可以拖拽
marker.enableDragging();

// 不可以拖拽
marker.disableDragging();

获取两点之间距离

1
2
3
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)+' 米。');  //获取两点距离

添加 图形，点，线，面 文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
//  marker是随着地图缩放级别，尺寸变化的
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点

// 折线
var polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920),
new BMap.Point(116.425, 39.900)
], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});   //创建折线


// 创建圆
var circle = new BMap.Circle(
point, 1500,
{strokeColor: "blue",
  fillColor: "#ccc",
  strokeWeight: 2,
  strokeOpacity: 0.5,
  fillOpacity: 0.7}
);


// 多边形
var polygon = new BMap.Polygon([
new BMap.Point(116.387112, 39.920977),
new BMap.Point(116.385243, 39.913063),
new BMap.Point(116.394226, 39.917988),
new BMap.Point(116.401772, 39.921364),
new BMap.Point(116.41248, 39.927893)
], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});


//创建矩形
var pStart = new BMap.Point(116.392214, 39.918985);
var pEnd = new BMap.Point(116.41478, 39.911901);
var rectangle = new BMap.Polygon([
new BMap.Point(pStart.lng, pStart.lat),
new BMap.Point(pEnd.lng, pStart.lat),
new BMap.Point(pEnd.lng, pEnd.lat),
new BMap.Point(pStart.lng, pEnd.lat)
], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});


// 开启(关闭)点线面的编辑(可以拖拽，移动点)
polygon.enableEditing()
polygon.disableEditing()


// 文字label
var opts = {
  position : new BMap.Point(116.417854,39.921988),    // 指定文本标注所在的地理位置
  offset   : new BMap.Size(30, -30)    //设置文本偏移量
}

var label = new BMap.Label("欢迎使用百度地图，这是一个简单的文本标注哦~", opts);  // 创建文本标注对象
label.setStyle({
  color : "red",
  fontSize : "12px",
  height : "20px",
  lineHeight : "20px",
  fontFamily:"微软雅黑"
});

// 覆盖物显示，隐藏
marker.show()
marker.hide()

// 添加覆盖物
map.addOverlay(marker);

// 清除覆盖物
map.clearOverlays();

删除指定覆盖物

getOverlays 方法可以获取 覆盖物数组，getLabel 方法可以，获取他的 label

1
2
3
4
5
6
7
8
9
function deletePoint(){
        var allOverlay = map.getOverlays();
        for (var i = 0; i < allOverlay.length -1; i++){
            if(allOverlay[i].getLabel().content == "我是id=1"){
                map.removeOverlay(allOverlay[i]);
                return false;
            }
        }
    }

marker 自定义 icon

1
2
3
4
5
// 创建小狐狸icon
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
map.addOverlay(marker2);

加载海量点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// data source
var data = {"data":[[74.438,39.006,1]]}

if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
    var points = [];  // 添加海量点数据
    for (var i = 0; i < data.data.length; i++) {
      points.push(new BMap.Point(data.data[i][0], data.data[i][1]));
    }
    var options = {
        size: BMAP_POINT_SIZE_SMALL,
        shape: BMAP_POINT_SHAPE_STAR,
        color: '#d340c3'
    }
    var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
    pointCollection.addEventListener('click', function (e) {
      alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
    });
    map.addOverlay(pointCollection);  // 添加Overlay
} else {
    alert('请在chrome、safari、IE8+以上浏览器查看本示例');
}

两点之间 画弧线 圆弧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//  引入一个库
 <script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>

var points = []
points.push( new BMap.Point(116.432045,39.910683) )
points.push( new BMap.Point(120.129721,30.314429) )
points.push( new BMap.Point(121.491121,25.127053) )
var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
map.addOverlay(curve); //添加到地图中
curve.enableEditing(); //开启编辑功能

//  centre:椭圆中心点,X:横向经度,Y:纵向纬度
function add_oval(centre,x,y){
  var assemble= []
  var angle;
  var dot;
  var tangent=x/y;
  for(i=0;i<36;i++)
  {
    angle = (2* Math.PI / 36) * i;
    dot = new BMap.Point(centre.lng+Math.sin(angle)*y*tangent, centre.lat+Math.cos(angle)*y);
    assemble.push(dot);
  }
  return assemble;
}
var oval = new BMap.Polygon(add_oval(point,0.1,0.3), {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(oval);

画行政区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function getBoundary(){
  var bdary = new BMap.Boundary();
  console.log(bdary)
  bdary.get("上海市徐汇区", function(rs){       //获取行政区域
    map.clearOverlays();        //清除地图覆盖物

    // rs.boundaries 是一个数组，每个元素，是地理位置的字符串 "12,12;123,23"
    var count = rs.boundaries.length;
    if (count === 0) {
      alert('未能获取当前输入行政区域');
      return ;
    }
    console.log(rs.boundaries)
    var pointArray = [];
    for (var i = 0; i < count; i++) {
      var ply = new BMap.Polygon(rs.boundaries[i],
        {
          strokeWeight: 2,
          strokeColor: "#ff0000",
          fillColor: 'blue'
        }
        ); //建立多边形覆盖物
      map.addOverlay(ply);  //添加覆盖物
      pointArray = pointArray.concat(ply.getPath());
      console.log(pointArray)
    }
    map.setViewport(pointArray);    //调整视野
    addlabel();
  });
}

自定义覆盖物

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text, mouseoverText){
  this._point = point;
  this._text = text;
  this._overText = mouseoverText;
}

ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function(map){
  this._map = map;
  var div = this._div = document.createElement("div");
  div.style.position = "absolute";
  div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
  div.style.backgroundColor = "#EE5D5B";
  div.style.border = "1px solid #BC3B3A";
  div.style.color = "white";
  div.style.height = "18px";
  div.style.padding = "2px";
  div.style.lineHeight = "18px";
  div.style.whiteSpace = "nowrap";
  div.style.MozUserSelect = "none";
  div.style.fontSize = "12px"
  var span = this._span = document.createElement("span");
  div.appendChild(span);
  span.appendChild(document.createTextNode(this._text));
  var that = this;

  var arrow = this._arrow = document.createElement("div");
  arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
  arrow.style.position = "absolute";
  arrow.style.width = "11px";
  arrow.style.height = "10px";
  arrow.style.top = "22px";
  arrow.style.left = "10px";
  arrow.style.overflow = "hidden";
  div.appendChild(arrow);

  div.onmouseover = function(){
    this.style.backgroundColor = "#6BADCA";
    this.style.borderColor = "#0000ff";
    this.getElementsByTagName("span")[0].innerHTML = that._overText;
    arrow.style.backgroundPosition = "0px -20px";
  }

  div.onmouseout = function(){
    this.style.backgroundColor = "#EE5D5B";
    this.style.borderColor = "#BC3B3A";
    this.getElementsByTagName("span")[0].innerHTML = that._text;
    arrow.style.backgroundPosition = "0px 0px";
  }

  mp.getPanes().labelPane.appendChild(div);

  return div;
}
ComplexCustomOverlay.prototype.draw = function(){
  var map = this._map;
  var pixel = map.pointToOverlayPixel(this._point);
  this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
  this._div.style.top  = pixel.y - 30 + "px";
}

var txt = "银湖海岸城", mouseoverTxt = txt + " " + parseInt(Math.random() * 1000,10) + "套" ;

var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(116.407845,39.914101), "银湖海岸城",mouseoverTxt);

mp.addOverlay(myCompOverlay);

点聚合(放大缩小)

1
2
3
4
5
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

// markers 是一个marker数组
var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});

矢量图 图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var vectorFCArrow = new BMap.Marker(new BMap.Point(point.lng-0.01,point.lat), {
  // 初始化方向向上的闭合箭头
  icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
    scale: 5,
    strokeWeight: 1,
    rotation: 0,//顺时针旋转30度
    fillColor: 'red',
    fillOpacity: 0.8
  })
});

var vectorStar = new BMap.Marker(new BMap.Point(point.lng+0.03,point.lat-0.03), {
  // 初始化五角星symbol
  icon: new BMap.Symbol(BMap_Symbol_SHAPE_STAR, {
    scale: 5,
    fillColor: "pink",
    fillOpacity: 0.8
  })
});

信息弹窗

1
2
3
4
5
6
7
8
9
10
var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", {
  width : 200,     // 信息窗口宽度
  height: 100,     // 信息窗口高度
  title : "海底捞王府井店" , // 信息窗口标题
  enableMessage:true,//设置允许信息窗发送短息
  message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
});
marker.addEventListener("click", function(){
  map.openInfoWindow(infoWindow,point); //开启信息窗口
});

鼠标右键

除了地图，marker 也支持加右键

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var menu = new BMap.ContextMenu();
var txtMenuItem = [
    {
        text:'放大',
        callback:function(){map.zoomIn()}
    },
    {
        text:'缩小',
        callback:function(){map.zoomOut()}
    }
];
for(var i=0; i < txtMenuItem.length; i++){
    menu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
}
map.addContextMenu(menu);

鼠标测距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//  引入插件
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>


var myDis = new BMapLib.DistanceTool(map);
map.addEventListener("load",function(){
  myDis.open();  //开启鼠标测距
  //myDis.close();  //关闭鼠标测距大
});

// 获取点击点坐标
map.addEventListener("click",function(e){
  alert(e.point.lng + "," + e.point.lat);
});

带箭头的 line

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
  /**
   * 变量定义：pixelStart： 线的一端屏幕坐标，pixelEnd：线的箭头端屏幕坐标；r：选取多长距离绘制箭头（单位像素，并不是CB对应的箭头的长度，而是红色线段对应的距离）；angle：箭头线（CB或者DB）与AB的夹角。
   1) 首先要将AB两点的经纬度坐标转换成屏幕坐标。
   2) 然后根据AB两点屏幕坐标以及r长度，计算绿色小绿点的屏幕坐标pixelTem。
   3) 然后根据B点、小绿点的屏幕坐标及angle角度，计算出C,D两点的屏幕坐标。
   4) 利用map的坐标转换方法，将C,D两点的屏幕坐标转成经纬度表示的坐标。
   5) 利用画线方法，绘制CBD多折线。
   */


export function drawArrow(map, points) {
  let polyline = new BMap.Polyline(
    points, {strokeColor: "white", strokeWeight: 3});
  map.addOverlay(polyline);

  addArrow(polyline, 10, Math.PI / 7);

  function addArrow(polyline, length, angleValue) { //绘制箭头的函数
    let linePoint = polyline.getPath();//线的坐标串
    console.log(linePoint);
    let arrowCount = linePoint.length;
    for (let i = 1; i < arrowCount; i++) { //在拐点处绘制箭头

      // pointToPixel 经纬度坐标转换为像素坐标
      let pixelStart = map.pointToPixel(linePoint[i - 1]);

      let pixelEnd = map.pointToPixel(linePoint[i]);
      let angle = angleValue;//箭头和主线的夹角
      let r = length; // r/Math.sin(angle)代表箭头长度
      let delta = 0; //主线斜率，垂直时无斜率
      let param = 0; //代码简洁考虑
      let pixelTemX, pixelTemY;//临时点坐标
      let pixelX, pixelY, pixelX1, pixelY1;//箭头两个点
      if (pixelEnd.x - pixelStart.x == 0) { //斜率不存在时
        pixelTemX = pixelEnd.x;
        if (pixelEnd.y > pixelStart.y) {
          pixelTemY = pixelEnd.y - r;
        } else {
          pixelTemY = pixelEnd.y + r;
        }
        //已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
        pixelX = pixelTemX - r * Math.tan(angle);
        pixelX1 = pixelTemX + r * Math.tan(angle);
        pixelY = pixelY1 = pixelTemY;
      } else  //斜率存在时
      {
        delta = (pixelEnd.y - pixelStart.y) / (pixelEnd.x - pixelStart.x);
        param = Math.sqrt(delta * delta + 1);

        if ((pixelEnd.x - pixelStart.x) < 0) //第二、三象限
        {
          pixelTemX = pixelEnd.x + r / param;
          pixelTemY = pixelEnd.y + delta * r / param;
        } else//第一、四象限
        {
          pixelTemX = pixelEnd.x - r / param;
          pixelTemY = pixelEnd.y - delta * r / param;
        }
        //已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
        pixelX = pixelTemX + Math.tan(angle) * r * delta / param;
        pixelY = pixelTemY - Math.tan(angle) * r / param;

        pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param;
        pixelY1 = pixelTemY + Math.tan(angle) * r / param;
      }

      let pointArrow = map.pixelToPoint(new BMap.Pixel(pixelX, pixelY));
      let pointArrow1 = map.pixelToPoint(new BMap.Pixel(pixelX1, pixelY1));
      let Arrow = new BMap.Polyline([
        pointArrow,
        linePoint[i],
        pointArrow1
      ], {strokeColor: "white", strokeWeight: 3});
      map.addOverlay(Arrow);
    }
  }
}