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


  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);

你可能感兴趣的:(web前端)