使用JavaScript在百度地图上绘制大量点-优快云博客

本文链接：https://blog.youkuaiyun.com/spotatoes/article/details/50994502

这段代码展示了如何使用JavaScript和百度地图API在网页上加载并显示大量点。通过创建自定义覆盖物（ComplexCustomOverlay），实现了在地图上绘制5000个随机点，并且对鼠标点击和移动事件进行了响应，提供了交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <title>xApp</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=K3yDzvlwWbDlvSQyvwCLd0l5"></script>

    <style type="text/css">
        html,body{height:100%;margin:0 auto;}
        #map,#maps{height:100%;width:100%;}
    </style>
</head>
<body>
    <div id="maps"></div>
    <!--<canvas id="map"></canvas>-->

    <script type="text/javascript" language="javascript">

        var map = new BMap.Map("maps", {});                        // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 3);     // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom();                            //启用滚轮放大缩小
        if (document.createElement('canvas').getContext) {
            //var mapStyle = {
            //    features: ["road", "building", "water", "land"],//隐藏地图上的poi
            //    style: "dark"  //设置地图风格为高端黑
            //}
            //map.setMapStyle(mapStyle);


            var canvas;
            // 复杂的自定义覆盖物
            function ComplexCustomOverlay(point) {
                this._point = point;
                this.car = [];
            }
            function Star(x,y,ctx,pt)
            {
                this.bx = this.x = x;
                this.by = this.y = y;
                this.pt = pt;
                this.ctx = ctx;
                this.size = 8;
                if (x == 0 && y == 0) {
                    var b = 3;
                }
                this.render = function(size)
                {
                    var ctx = this.ctx;
                    var p = this;
                    if (p.x == 0 && p.y == 0)
                    {
                        var b = 3;
                    }
                    p.size = size;
                    p.isVisible = false;
                    var x = p.x  , y = p.y ;
                    if (x < 0 || y < 0)
                        return false;
                    if (x > ctx.canvas.width || y > ctx.canvas