个人学习笔记——百度地图

 

初始化

// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("map");    // 创建Map实例
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 12);  // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放s

异步加载

在 请求链接后加上 callback = init 实现异步加载

function init () {
    var map = new BMapGL.Map("map");    // 创建Map实例
    var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 12);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
}
window.onload = function () {
    var script = document.createElement('script')
    script.src = 'https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥&callback=init'
    document.body.appendChild(script)
}

样式

去除版权和图标

.anchorBL, .BMap-cpyCtrl {
    display: none;
}

 

组件控件的样式重叠

如: 缩放控件

.anchorBL, .BMap-cpyCtrl {
    display: none;
}
​
.BMap_stdMpZoom {
    display: block;
}
[注意]  百度控件基本上都是 DOM 元素绘制的，修改其 css 样式即可

常用API

常用参数或构造类

ControlAnchor

此常量表示控件的定位。

常量描述
BMAP_ANCHOR_TOP_LEFT 控件将定位到地图的左上角
BMAP_ANCHOR_TOP_RIGHT 控件将定位到地图的右上角
BMAP_ANCHOR_BOTTOM_LEFT 控件将定位到地图的左下角
BMAP_ANCHOR_BOTTOM_RIGHT 控件将定位到地图的右下角

Size

此类以像素表示一个矩形区域的大小。

构造函数描述
Size(width: Number, height: Number) 以指定的宽度和高度创建一个矩形区域大小对象

 

方法返回值描述
equals(other: Size)) Boolean 当且仅当此矩形中的宽度和高度都等于其他矩形的宽度和高度时，返回true

1. 设置地图旋转角度

map.setHeading(0)  // 设置旋转角为0

2. 设置地图的倾斜角度

map.setTilt(70);   // 设置倾斜角为70

3. 设置地图类型

// BMAP_NORMAL_MAP  此地图类型展示普通街道视图
// BMAP_EARTH_MAP  此地图类型展示地球卫星视图
map.setMapType(BMAP_EARTH_MAP)

4. 控件

addControl

map.addControl(zoomCtrl)    // 将控件添加到地图，一个控件实例只能向地图中添加一次

缩放控件

添加控件

var zoomCtrl = new BMapGL.ZoomControl()
map.addControl(zoomCtrl)

可选参数

ZoomControlOptions

此类表示ZoomControl构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性类型描述
anchor ControlAnchor 控件的停靠位置
offset Size 控件的偏移值

 

例如 : 

var zoomCtrl = new BMapGL.ZoomControl({
    anchor: BMAP_ANCHOR_BOTTOM_LEFT,
    offset: new BMapGL.Size(100, 100)
})
map.addControl(zoomCtrl)

缩放窃听方法

zoomstart{type, target}地图更改缩放级别开始时触发触发此事件
zoomend {type, target} 地图更改缩放级别结束时触发触发此事件 
map.addEventListener('zoomstart', function () {
    console.log(map.getZoom())   // 返回地图当前缩放级别
})
map.addEventListener('zoomend', function () {
    console.log(map.getZoom())
})

比例尺控件

参数如上

例如 ：

var scaleCtrl = new BMapGL.ScaleControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    offset: new BMapGL.Size(20, 20)
})
map.addControl(scaleCtrl)

6. MapOptions

此类表示Map构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性类型描述
minZoom Number 地图允许展示的最小级别
maxZoom Number 地图允许展示的最大级别
mapType MapTypeId 地图类型，默认为BMAP_NORMAL_MAP
enableAutoResize Boolean 开启自动适应地图容器变化，默认启用

例如 ：

var map = new BMapGL.Map("map", {
    minZoom: 8,
    maxZoom: 12,
    mapType: BMAP_NORMAL_MAP
});    // 创建Map实例

7. 个性化地图

// 设置个性化地图，参数为个性化配置对象
map.setMapStyleV2({
    styleId: '046a44bd2b0f22d13b29bea51901fc68', 
    styleJson: []
});

8. 地图绘制

addOverlay

map.addOverlay(polyline)   //  将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次

绘制图标

Icon

此类表示标注覆盖物所使用的图标。

构造函数描述
Icon(url: String, size: Size, opts: IconOptions ) 以给定的图像地址和大小创建图标对象实例

 

属性类型描述
anchor Size 图标的定位点相对于图标左上角的偏移值
size Size 图标可视区域的大小
imageOffset Size 图标所用的图片相对于可视区域的偏移值，此功能的作用等同于CSS中的background-position属性
imageSize Size 图标所用的图片的大小，此功能的作用等同于CSS中的background-size属性。可用于实现高清屏的高清效果
imageUrl String 图标所用图像资源的位置
printImageUrl String 设置icon打印图片的url，该打印图片只针对IE6有效，解决IE6使用PNG滤镜导致的错位问题。如果您的icon没有使用PNG格式图片或者没有使用CSS Sprites技术，则可忽略此配置

 

方法返回值描述
setImageUrl(imageUrl: String) none 设置图片资源的地址
setSize(size: Size) none 设置图标可视区域的大小
setImageSize(offset: Size) none 设置图标的大小
setAnchor(anchor: Size) none 设置图标定位点相对于其左上角的偏移值
setImageOffset(offset: Size)) none 设置图片相对于可视区域的偏移值

IconOptions

此类表示Icon构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性类型描述
anchor Size 图标的定位锚点。此点用来决定图标与地理位置的关系，是相对于图标左上角的偏移值，默认等于图标宽度和高度的中间值
imageOffset Size 图片相对于可视区域的偏移值

Marker

此类表示地图上的一个图像标注。

构造函数描述
Marker(point: Point), opts: MarkerOptions)) 创建一个图像标注实例。point参数指定了图像标注所在的地理位置

例如： 

var myIcon = new BMapGL.Icon('https://www.youbaobao.xyz/datav-res/datav/location.png',
        new BMapGL.Size(60, 60), {
            anchor: new BMapGL.Size(100, 0),
            imageOffset: new BMapGL.Size(0, 0)
        })

var marker = new BMapGL.Marker(point, { icon: myIcon })
map.addOverlay(marker)   // 将覆盖物添加到地图中，一个覆盖物实例只能向地图中添加一次

绘制多直线

Polyline

使用浏览器的矢量制图工具（如果可用）在地图上绘制折线的地图叠加层。

构造函数描述
Polyline(points: Array< Point>, opts: PolylineOptions)) 创建折线覆盖物对象

PolylineOptions

此类表示Polyline构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性类型描述
strokeColor String 折线颜色
strokeWeight Number 折线的宽度，以像素为单位
strokeOpacity Number 折线的透明度，取值范围0 - 1
strokeStyle String 折线的样式，solid或dashed
enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true
enableEditing Boolean 是否启用线编辑，默认为false
enableClicking Boolean 是否响应点击事件，默认为true
geodesic Boolean 是否开启大地线模式，true时，两点连线将以大地线的形式。默认为false
clip Boolean 是否进行跨经度180度裁剪，绘制跨精度180时为了优化效果，可以设置成false，默认为true

例如 ：

var polyline = new BMapGL.Polyline([
    new BMapGL.Point(106.554413,29.557184),
    new BMapGL.Point(106.654413, 29.457184),
    new BMapGL.Point(106.214413, 29.497184)
], {
    strokeColor: '#0f0', 
    strokeWeight: 3,
    strokeOpacity: 0.5
})
map.addOverlay(polyline)

绘制多边形

Polygon

此类表示一个多边形覆盖物。

构造函数描述
Polygon(points: Array< Point >, opts: PolygonOptions ) 创建多边形覆盖物

PolygonOptions

此类表示Polygon构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性类型描述
strokeColor String 边线颜色
fillColor String 填充颜色。当参数为空时，折线覆盖物将没有填充效果
strokeWeight Number 边线的宽度，以像素为单位
strokeOpacity Number 边线透明度，取值范围0 - 1
fillOpacity Number 填充的透明度，取值范围0 - 1
strokeStyle String 边线的样式，solid或dashed
enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true
enableEditing Boolean 是否启用线编辑，默认为false
enableClicking Boolean 是否响应点击事件，默认为true

例子：

var polygon= new BMapGL.Polygon([
    new BMapGL.Point(106.554413, 29.557184),
    new BMapGL.Point(106.654413, 29.457184),
    new BMapGL.Point(106.214413, 29.497184),
    new BMapGL.Point(106.414413, 29.597184)
], {
    strokeColor: '#0f0',
    strokeWeight: 3,
    fillColor: 'blue'
})
map.addOverlay(polygon)

绘制文本

Label

此类表示地图上的文本标注。

构造函数描述
Label(content: String, opts: LabelOptions )) 创建一个文本标注实例。point参数指定了文本标注所在的地理位置

 

方法返回值描述
setStyle(styles: Object) none 设置文本标注样式，该样式将作用于文本标注的容器元素上。其中styles为JavaScript对象常量，比如： setStyle({ color : "red", fontSize : "12px" }) 注意：如果css的属性名中包含连字符，需要将连字符去掉并将其后的字母进行大写处理，例如：背景色属性要写成：backgroundColor

LabelOptions

此类表示Lable构造函数的可选参数。它没有构造函数，但可通过对象字面量形式表示。

属性类型描述
offset Size 文本标注的位置偏移值
position Point 文本标注的地理位置
enableMassClear Boolean 是否在调用map.clearOverlays清除此覆盖物，默认为true

例子：

var content = '数据可视化'
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(200, 20)           // 设置标注的偏移量
});
label.setStyle({                              // 设置label的样式
    width: '100px',
    height: '20px',
    padding: '20px',
    color: '#fff',
    fontSize: '20px',
    border: '2px solid #1E90FF',
    background: '#8c8c8c',
    whiteSpace: 'wrap',
    overflow: 'hidden',
    lineHeight: '20px'
})
label.addEventListener('click', function (e) {
    alert(e.target.content)
})
map.addOverlay(label)

绘制弹窗信息

InfoWindow

此类表示地图上包含信息的窗口。

构造函数描述
InfoWindow(content: String | HTMLElement, opts: InfoWindowOptions ) 创建一个信息窗实例，其中content支持HTML内容。

InfoWindowOptions

此类表示InfoWindow构造函数的可选参数，它没有构造函数，但可通过对象字面量形式表示。

属性类型描述
width Number 信息窗宽度，单位像素。取值范围：0, 220 - 730。如果您指定宽度为0，则信息窗口的宽度将按照其内容自动调整
height Number 信息窗高度，单位像素。取值范围：0, 60 - 650。如果您指定高度为0，则信息窗口的高度将按照其内容自动调整
maxWidth Number 信息窗最大化时的宽度，单位像素。取值范围：220 - 730
offset Size 信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的infoWindowOffset属性值，您可以为信息窗添加偏移量来改变默认位置
title String 信息窗标题文字，支持HTML内容
enableAutoPan Boolean 是否开启信息窗口打开时地图自动移动（默认开启）
enableCloseOnClick Boolean 是否开启点击地图关闭信息窗口（默认开启）

例子：

var marker = new BMapGL.Marker(point, { icon: myIcon })
marker.addEventListener('click', function () {
    // 创建信息窗口对象
    var content = "数据可视化"
    var div = document.createElement('div')
    div.innerText = content
    div.style.color = 'red'
    var infoWindow = new BMapGL.InfoWindow(div, {
        width: 250,     // 信息窗口宽度
        height: 100,    // 信息窗口高度
        title: "标题",  // 信息窗口标题
        offset: new BMapGL.Size(20, 0   )
    })
    map.openInfoWindow(infoWindow, point);       // 打开信息窗口
})
map.addOverlay(marker)

9. 视图动画

百度API提供

控制动画

map.startViewAnimation(animation);         // 开始播放动画
map.cancelViewAnimation(animation);         // 强制停止动画

ViewAnimation

地图视角动画类。

构造函数描述
ViewAnimation(keyFrames: Array<ViewAnimationKeyFrames, opts: ViewAnimationOptions) 创建地图视角动画对象，通过关键帧的形式对动画进行定义

 

事件参数描述
animationstart {} 动画开始时触发，如果配置了delay，则在delay后触发
animationiterations {} 当动画循环大于1次时，上一次结束既下一次开始时触发。最后一次循环结束时不触发
animationend {} 动画结束时触发，如果动画中途被终止，则不会触发
animationcancel {} 动画中途被终止时触发

ViewAnimationKeyFrames

此类表示地图视角动画的关键帧，通过定义关键帧，API会补全关键帧之间过渡的动画过程。

属性类型描述
center Point 地图中心点，默认值为地图当前状态中心点
zoom Number 地图缩放级别，默认值为地图当前状态缩放级别
tilt Number 地图倾斜角度，默认值为地图当前状态倾斜角度
heading Number 地图旋转角度，默认值为地图当前旋转角度
percentage Number 表示当前关键帧处于动画过程的百分比，取值范围0~1

ViewAnimationOptions

此类表示地图视角动画的配置。

属性类型描述
delay Number 动画开始延迟时间，单位ms，默认0
duration Number 动画持续时间，单位ms，默认1000
interation Number | string 循环次数，参数类型为数字时循环固定次数，参数为'INFINITE'无限循环，默认为1

例如：

var keyFrames = [{
        center: new BMapGL.Point(116.307092,40.054922),
        zoom:20,
        tilt: 50,
        heading: 0,
        percentage: 0
    }, {
        center: new BMapGL.Point(116.306858,40.057887),
        zoom:21,
        tilt: 70,
        heading: -90,
        percentage: 0.35
    }, {
        center: new BMapGL.Point(116.307904,40.058118),
        zoom: 21,
        tilt: 70,
        heading: -90,
        percentage: 0.45
    }, {
        center: new BMapGL.Point(116.308902,40.055954),
        zoom:21,
        tilt: 70,
        heading: -270,
        percentage: 0.85
    }, {
        center: new BMapGL.Point(116.307092,40.054922),
        zoom:20,
        tilt: 50,
        heading: -360,
        percentage: 1
    }];
var opts = {
    duration: 10000,     // 设置每次迭代动画持续时间
    delay: 3000,         // 设置动画延迟开始时间
    interation: 'INFINITE'        // 设置动画迭代次数
};
var animation = new BMapGL.ViewAnimation(keyFrames, opts);        // 初始化动画实例
animation.addEventListener('animationstart', function(e) {        // 监听动画开始事件
    console.log('start');
});
animation.addEventListener('animationiterations', function(e) {   // 监听动画迭代事件
    console.log('onanimationiterations');
});
animation.addEventListener('animationend', function(e) {        // 监听动画结束事件
    console.log('end');
});
animation.addEventListener('animationcancel', function(e) {       // 监听动画中途被终止事件
    console.log('cancel');
});
document.getElementById('start').addEventListener('click', function() {
    map.startViewAnimation(animation);         // 开始播放动画
});
document.getElementById('end').addEventListener('click', function() {
    map.cancelViewAnimation(animation);         // 强制停止动画
});

TrackAnimation

BMapGLLib

需引入: https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js

控制动画

trackAnimation.start()       // 开始播放动画
trackAnimation.cancel()      // 强制停止动画

TrackAnimation

描述：此类是轨迹3D动画类，用于初始化一个轨迹3D动画。

构造函数描述
TrackAnimation(map: Map, poyline: Polyline, options: TrackAnimationOptions) 创建一个新的轨迹3D动画，构造函数需要两个参数：参数1为地图实例，参数2为配置项

 

 

属性类型描述
start() none 开始动画
cancel() none 终止动画
setPolyline(polyline: Polyline) none 设置动画轨迹折线覆盖物
getPolyline() Polyline 获取动画轨迹折线覆盖物
setDelay(delay: Number) none 动画开始延迟，单位ms
getDelay() Number 获取动画开始延迟，单位ms
setDuration(duration: Number) none 设置动画持续时间。建议根据轨迹长度调整，地图在轨迹播放过程中动态渲染，动画持续时间太短影响地图渲染效果。
getDuration() Number 获取动画持续时间
enableOverallView() none 开启动画结束后总览视图缩放（调整地图到能看到整个轨迹的视野），默认开启
disableOverallView() none 关闭动画结束后总览视图缩放（调整地图到能看到整个轨迹的视野），默认关闭
setTilt(tilt: Number) none 设置动画中的地图倾斜角度，默认55度
getTilt() Number 获取动画中的地图倾斜角度
setZoom(zoom: Number) none 设置动画中的缩放级别，默认会根据轨迹情况调整到一个合适的级别
getZoom() Number 设置动画中的缩放级别

TrackAnimationOptions

描述：轨迹动画配置，不可实例化

属性类型描述
duration Number 动画持续时常，单位ms
delay Number 动画开始延迟
overallView Boolean 是否在动画结束后总览视图缩放（调整地图到能看到整个轨迹的视野），默认开启
tilt Number 设置动画中的地图倾斜角度，默认55度
zoom Number 设置动画中的缩放级别，默认会根据轨迹情况调整到一个合适的级别

例如：

var points = [
    new BMapGL.Point(116.418038,39.91979),
    new BMapGL.Point(116.418267,40.059246),
    new BMapGL.Point(116.307899,40.057038)
]
var lines = new BMapGL.Polyline(points)
var opts = {
    delay: 1000,        // 动画开始的延迟，默认0，单位ms
    duration: 20000,    // 动画持续时长，默认为10000，单位ms
    tilt: 30,           // 轨迹播放的角度，默认为55
    overallView: true   // 动画完成后自动调整视野到总览
}
var trackAnimation = new BMapGLLib.TrackAnimation(map, lines, opts)
document.getElementById('start').addEventListener('click', function () {
   trackAnimation.start()
})
document.getElementById('end').addEventListener('click', function () {
    trackAnimation.cancel()
})
map.setTilt(70);
posted @ 2021-02-23 14:47  rudeGuy  阅读(1305)  评论(0)    收藏  举报