百度地图自定义添加覆盖物

最新推荐文章于 2022-12-12 17:45:29 发布

原创最新推荐文章于 2022-12-12 17:45:29 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图自定义气泡覆盖物

web前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何利用百度地图JavaScript API创建自定义的气泡覆盖物，包括覆盖物的位置设置、样式定制及事件监听等关键步骤。

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


  var map = new BMap.Map("map", {
            minZoom : 10,
            maxZoom : 16,
            enableMapClick:false

        });
        map.setMapStyle({
            styleJson:[
                {
                    "featureType": "railway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                },
                {
                    "featureType": "subway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                },
                {
                    "featureType": "local",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }
            ]
        });
        // map.setMapStyle({style:'normal'});
        //第1步：设置地图中心点，深圳市
        var point = new BMap.Point(la,lo);
        //第2步：初始化地图,设置中心点坐标和地图级别。
        map.centerAndZoom(point,zoom);
        //第3步：启用滚轮放大缩小
        //第3步：启用滚轮放大缩小
        map.enableScrollWheelZoom(true);


                /*添加覆盖物数字*/
                ComplexCustomOverlay.prototype = new BMap.Overlay();
                ComplexCustomOverlay.prototype.initialize = function(map){
                    this._map = map;
                    var span=this._span=document.createElement("span");

                    //这里用jquery设置样式
                    $(span).css({
                        'position':'absolute',
                        'zIndex':BMap.Overlay.getZIndex(this._point.lat),
                        'display':'block',
                        'width':'26px',
                        'right':'10px',
                        'color':'#fff',
                        'text-align':'center',
                        'point-events':'none'});

                    //设置数字也就是我们的标注
                    this._span.innerHTML=this._index;
                    map.getPanes().labelPane.appendChild(span);
                    return span;
                }
                ComplexCustomOverlay.prototype.draw = function(){
                    var map = this._map;

                    var pixel = map.pointToOverlayPixel(this._point);

                    //设置自定义覆盖物span 与marker的位置

                    this._span.style.left = pixel.x - 14+'px';

                    this._span.style.top  = pixel.y - 13+'px';
                }
                myCompOverlay = new ComplexCustomOverlay(point,i+1);

                map.addOverlay(myCompOverlay);