浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

JavaScript API

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。免费对广大用户开放。

简介
JavaScript API v3.0 的Overlay中,新增了CanvasLayer类。提供了在地图上绘制自定义的Canvas2D或WebGL覆盖物的功能。绘制的覆盖物和其他的Overlay一样,会根据自己的经纬度贴合在地图上。
创建Canvas2D覆盖物
CanvasLayer类提供了在地图上进行Web前端canvas绘制的功能。具体的canvas绘制方法和逻辑可以参考canvas的相关资料。
使用CanvasLayer的简单示例如下:
var mp = new BMap.Map("allmap");
mp.centerAndZoom(new BMap.Point(116.3964,39.9093), 10);

var canvasLayer = new BMap.CanvasLayer({
    update: update
});

function update() {
    var ctx = this.canvas.getContext("2d");

    if (!ctx) {
        return;
    }

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    var temp = {};
    ctx.fillStyle = "rgba(50, 50, 255, 0.7)";
    ctx.beginPath();
    var data = [
    new BMap.Point(116.297047,39.979542),
    new BMap.Point(116.321768,39.88748),
    new BMap.Point(116.494243,39.956539)
    ];

    for (var i = 0, len = data.length; i < len; i++) {

        // 绘制时需要对经纬度进行转换
        var pixel = mp.pointToPixel(data[i]);

        ctx.fillRect(pixel.x, pixel.y, 30, 30);
    }
}

mp.addOverlay(canvasLayer);