精华内容
下载资源
问答
  • 本地创建MarkerClusterer.js var BMapLib = window.BMapLib = BMapLib || {}; (function() { var getExtendedBounds = function(map, bounds, gridSize) { bounds = cutBoundsInRange(bounds);...

    本地创建MarkerClusterer.js

    var BMapLib = window.BMapLib = BMapLib || {}; (function() {
        var getExtendedBounds = function(map, bounds, gridSize) {
            bounds = cutBoundsInRange(bounds);
            var pixelNE = map.pointToPixel(bounds.getNorthEast());
            var pixelSW = map.pointToPixel(bounds.getSouthWest());
            pixelNE.x += gridSize;
            pixelNE.y -= gridSize;
            pixelSW.x -= gridSize;
            pixelSW.y += gridSize;
            var newNE = map.pixelToPoint(pixelNE);
            var newSW = map.pixelToPoint(pixelSW);
            return new BMap.Bounds(newSW, newNE)
        };
        var cutBoundsInRange = function(bounds) {
            var maxX = getRange(bounds.getNorthEast().lng, -180, 180);
            var minX = getRange(bounds.getSouthWest().lng, -180, 180);
            var maxY = getRange(bounds.getNorthEast().lat, -74, 74);
            var minY = getRange(bounds.getSouthWest().lat, -74, 74);
            return new BMap.Bounds(new BMap.Point(minX, minY), new BMap.Point(maxX, maxY))
        };
        var getRange = function(i, mix, max) {
            mix && (i = Math.max(i, mix));
            max && (i = Math.min(i, max));
            return i
        };
        var isArray = function(source) {
            return '[object Array]' === Object.prototype.toString.call(source)
        };
        var indexOf = function(item, source) {
            var index = -1;
            if (isArray(source)) {
                if (source.indexOf) {
                    index = source.indexOf(item)
                } else {
                    for (var i = 0,
                    m; m = source[i]; i++) {
                        if (m === item) {
                            index = i;
                            break;
                        }
                    }
                }
            }
            return index
        };
        var MarkerClusterer = BMapLib.MarkerClusterer = function(map, options) {
            if (!map) {
                return
            }
            this._map = map;
            this._markers = [];
            this._clusters = [];
            var opts = options || {};
            this._gridSize = opts["gridSize"] || 60;
            this._maxZoom = opts["maxZoom"] || 18;
            this._minClusterSize = opts["minClusterSize"] || 2;
            this._isAverageCenter = false;
            if (opts['isAverageCenter'] != undefined) {
                this._isAverageCenter = opts['isAverageCenter']
            }
            this._styles = opts["styles"] || [];
            var that = this;
            this._map.addEventListener("zoomend",
            function() {
                that._redraw()
            });
            this._map.addEventListener("moveend",
            function() {
                that._redraw()
            });
            var mkrs = opts["markers"];
            isArray(mkrs) && this.addMarkers(mkrs)
        };
        MarkerClusterer.prototype.addMarkers = function(markers) {
            for (var i = 0,
            len = markers.length; i < len; i++) {
                this._pushMarkerTo(markers[i])
            }
            this._createClusters()
        };
        MarkerClusterer.prototype._pushMarkerTo = function(marker) {
            var index = indexOf(marker, this._markers);
            if (index === -1) {
                marker.isInCluster = false;
                this._markers.push(marker)
            }
        };
        MarkerClusterer.prototype.addMarker = function(marker) {
            this._pushMarkerTo(marker);
            this._createClusters()
        };
        MarkerClusterer.prototype._createClusters = function() {
            var mapBounds = this._map.getBounds();
            var extendedBounds = getExtendedBounds(this._map, mapBounds, this._gridSize);
            for (var i = 0,
            marker; marker = this._markers[i]; i++) {
                if (!marker.isInCluster && extendedBounds.containsPoint(marker.getPosition())) {
                    this._addToClosestCluster(marker)
                }
            }
        };
        MarkerClusterer.prototype._addToClosestCluster = function(marker) {
            var distance = 4000000;
            var clusterToAddTo = null;
            var position = marker.getPosition();
            for (var i = 0,
            cluster; cluster = this._clusters[i]; i++) {
                var center = cluster.getCenter();
                if (center) {
                    var d = this._map.getDistance(center, marker.getPosition());
                    if (d < distance) {
                        distance = d;
                        clusterToAddTo = cluster
                    }
                }
            }
            if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {
                clusterToAddTo.addMarker(marker)
            } else {
                var cluster = new Cluster(this);
                cluster.addMarker(marker);
                this._clusters.push(cluster)
            }
        };
        MarkerClusterer.prototype._clearLastClusters = function() {
            for (var i = 0,
            cluster; cluster = this._clusters[i]; i++) {
                cluster.remove()
            }
            this._clusters = [];
            this._removeMarkersFromCluster()
        };
        MarkerClusterer.prototype._removeMarkersFromCluster = function() {
            for (var i = 0,
            marker; marker = this._markers[i]; i++) {
                marker.isInCluster = false
            }
        };
        MarkerClusterer.prototype._removeMarkersFromMap = function() {
            for (var i = 0,
            marker; marker = this._markers[i]; i++) {
                marker.isInCluster = false;
                tmplabel = marker.getLabel();
                this._map.removeOverlay(marker);
                marker.setLabel(tmplabel)
            }
        };
        MarkerClusterer.prototype._removeMarker = function(marker) {
            var index = indexOf(marker, this._markers);
            if (index === -1) {
                return false
            }
            tmplabel = marker.getLabel();
            this._map.removeOverlay(marker);
            marker.setLabel(tmplabel);
            this._markers.splice(index, 1);
            return true
        };
        MarkerClusterer.prototype.removeMarker = function(marker) {
            var success = this._removeMarker(marker);
            if (success) {
                this._clearLastClusters();
                this._createClusters()
            }
            return success
        };
        MarkerClusterer.prototype.removeMarkers = function(markers) {
            var success = false;
            for (var i = 0; i < markers.length; i++) {
                var r = this._removeMarker(markers[i]);
                success = success || r
            }
            if (success) {
                this._clearLastClusters();
                this._createClusters()
            }
            return success
        };
        MarkerClusterer.prototype.clearMarkers = function() {
            this._clearLastClusters();
            this._removeMarkersFromMap();
            this._markers = []
        };
        MarkerClusterer.prototype._redraw = function() {
            this._clearLastClusters();
            this._createClusters()
        };
        MarkerClusterer.prototype.getGridSize = function() {
            return this._gridSize
        };
        MarkerClusterer.prototype.setGridSize = function(size) {
            this._gridSize = size;
            this._redraw()
        };
        MarkerClusterer.prototype.getMaxZoom = function() {
            return this._maxZoom
        };
        MarkerClusterer.prototype.setMaxZoom = function(maxZoom) {
            this._maxZoom = maxZoom;
            this._redraw()
        };
        MarkerClusterer.prototype.getStyles = function() {
            return this._styles
        };
        MarkerClusterer.prototype.setStyles = function(styles) {
            this._styles = styles;
            this._redraw()
        };
        MarkerClusterer.prototype.getMinClusterSize = function() {
            return this._minClusterSize
        };
        MarkerClusterer.prototype.setMinClusterSize = function(size) {
            this._minClusterSize = size;
            this._redraw()
        };
        MarkerClusterer.prototype.isAverageCenter = function() {
            return this._isAverageCenter
        };
        MarkerClusterer.prototype.getMap = function() {
            return this._map
        };
        MarkerClusterer.prototype.getMarkers = function() {
            return this._markers
        };
        MarkerClusterer.prototype.getClustersCount = function() {
            var count = 0;
            for (var i = 0,
            cluster; cluster = this._clusters[i]; i++) {
                cluster.isReal() && count++
            }
            return count
        };
        function Cluster(markerClusterer) {
            this._markerClusterer = markerClusterer;
            this._map = markerClusterer.getMap();
            this._minClusterSize = markerClusterer.getMinClusterSize();
            this._isAverageCenter = markerClusterer.isAverageCenter();
            this._center = null;
            this._markers = [];
            this._gridBounds = null;
            this._isReal = false;
            this._clusterMarker = new BMapLib.TextIconOverlay(this._center, this._markers.length, {
                "styles": this._markerClusterer.getStyles()
            })
        }
        Cluster.prototype.addMarker = function(marker) {
            if (this.isMarkerInCluster(marker)) {
                return false
            }
            if (!this._center) {
                this._center = marker.getPosition();
                this.updateGridBounds()
            } else {
                if (this._isAverageCenter) {
                    var l = this._markers.length + 1;
                    var lat = (this._center.lat * (l - 1) + marker.getPosition().lat) / l;
                    var lng = (this._center.lng * (l - 1) + marker.getPosition().lng) / l;
                    this._center = new BMap.Point(lng, lat);
                    this.updateGridBounds()
                }
            }
            marker.isInCluster = true;
            this._markers.push(marker);
            var len = this._markers.length;
            if (len < this._minClusterSize) {
                this._map.addOverlay(marker);
                return true
            } else if (len === this._minClusterSize) {
                for (var i = 0; i < len; i++) {
                    tmplabel = this._markers[i].getLabel();
                    this._markers[i].getMap() && this._map.removeOverlay(this._markers[i]);
                    this._markers[i].setLabel(tmplabel)
                }
            }
            this._map.addOverlay(this._clusterMarker);
            this._isReal = true;
            this.updateClusterMarker();
            return true
        };
        Cluster.prototype.isMarkerInCluster = function(marker) {
            if (this._markers.indexOf) {
                return this._markers.indexOf(marker) != -1
            } else {
                for (var i = 0,
                m; m = this._markers[i]; i++) {
                    if (m === marker) {
                        return true
                    }
                }
            }
            return false
        };
        Cluster.prototype.isMarkerInClusterBounds = function(marker) {
            return this._gridBounds.containsPoint(marker.getPosition())
        };
        Cluster.prototype.isReal = function(marker) {
            return this._isReal
        };
        Cluster.prototype.updateGridBounds = function() {
            var bounds = new BMap.Bounds(this._center, this._center);
            this._gridBounds = getExtendedBounds(this._map, bounds, this._markerClusterer.getGridSize())
        };
        Cluster.prototype.updateClusterMarker = function() {
            if (this._map.getZoom() > this._markerClusterer.getMaxZoom()) {
                this._clusterMarker && this._map.removeOverlay(this._clusterMarker);
                for (var i = 0,
                marker; marker = this._markers[i]; i++) {
                    this._map.addOverlay(marker)
                }
                return
            }
            if (this._markers.length < this._minClusterSize) {
                this._clusterMarker.hide();
                return
            }
            this._clusterMarker.setPosition(this._center);
            this._clusterMarker.setText(this._markers.length);
            var thatMap = this._map;
            var thatBounds = this.getBounds();
            this._clusterMarker.addEventListener("click",
            function(event) {
                thatMap.setViewport(thatBounds)
            })
        };
        Cluster.prototype.remove = function() {
            for (var i = 0,
            m; m = this._markers[i]; i++) {
                var tmplabel = this._markers[i].getLabel();
                this._markers[i].getMap() && this._map.removeOverlay(this._markers[i]);
                this._markers[i].setLabel(tmplabel)
            }
            this._map.removeOverlay(this._clusterMarker);
            this._markers.length = 0;
            delete this._markers
        };
        Cluster.prototype.getBounds = function() {
            var bounds = new BMap.Bounds(this._center, this._center);
            for (var i = 0,
            marker; marker = this._markers[i]; i++) {
                bounds.extend(marker.getPosition())
            }
            return bounds
        };
        Cluster.prototype.getCenter = function() {
            return this._center;
        };
    })();
    

    本地创建TextIconOverlay.js

    var BMapLib=window.BMapLib=BMapLib||{};(function(){var d,c=d=c||{version:"1.3.8"};(function(){c.guid="$BAIDU$";window[c.guid]=window[c.guid]||{};c.dom=c.dom||{};c.dom.g=function(f){if("string"==typeof f||f instanceof String){return document.getElementById(f)}else{if(f&&f.nodeName&&(f.nodeType==1||f.nodeType==9)){return f}}return null};c.g=c.G=c.dom.g;c.dom.getDocument=function(f){f=c.dom.g(f);return f.nodeType==9?f:f.ownerDocument||f.document};c.lang=c.lang||{};c.lang.isString=function(f){return"[object String]"==Object.prototype.toString.call(f)};c.isString=c.lang.isString;c.dom._g=function(f){if(c.lang.isString(f)){return document.getElementById(f)}return f};c._g=c.dom._g;c.browser=c.browser||{};if(/msie (\d+\.\d)/i.test(navigator.userAgent)){c.browser.ie=c.ie=document.documentMode||+RegExp["\x241"]}c.dom.getComputedStyle=function(g,f){g=c.dom._g(g);var i=c.dom.getDocument(g),h;if(i.defaultView&&i.defaultView.getComputedStyle){h=i.defaultView.getComputedStyle(g,null);if(h){return h[f]||h.getPropertyValue(f)}}return""};c.dom._styleFixer=c.dom._styleFixer||{};c.dom._styleFilter=c.dom._styleFilter||[];c.dom._styleFilter.filter=function(g,k,l){for(var f=0,j=c.dom._styleFilter,h;h=j[f];f++){if(h=h[l]){k=h(g,k)}}return k};c.string=c.string||{};c.string.toCamelCase=function(f){if(f.indexOf("-")<0&&f.indexOf("_")<0){return f}return f.replace(/[-_][^-_]/g,function(g){return g.charAt(1).toUpperCase()})};c.dom.getStyle=function(h,g){var j=c.dom;h=j.g(h);g=c.string.toCamelCase(g);var i=h.style[g]||(h.currentStyle?h.currentStyle[g]:"")||j.getComputedStyle(h,g);if(!i){var f=j._styleFixer[g];if(f){i=f.get?f.get(h):c.dom.getStyle(h,f)}}if(f=j._styleFilter){i=f.filter(g,i,"get")}return i};c.getStyle=c.dom.getStyle;if(/opera\/(\d+\.\d)/i.test(navigator.userAgent)){c.browser.opera=+RegExp["\x241"]}c.browser.isWebkit=/webkit/i.test(navigator.userAgent);c.browser.isGecko=/gecko/i.test(navigator.userAgent)&&!/like gecko/i.test(navigator.userAgent);c.browser.isStrict=document.compatMode=="CSS1Compat";c.dom.getPosition=function(f){f=c.dom.g(f);var o=c.dom.getDocument(f),i=c.browser,l=c.dom.getStyle,h=i.isGecko>0&&o.getBoxObjectFor&&l(f,"position")=="absolute"&&(f.style.top===""||f.style.left===""),m={left:0,top:0},k=(i.ie&&!i.isStrict)?o.body:o.documentElement,p,g;if(f==k){return m}if(f.getBoundingClientRect){g=f.getBoundingClientRect();m.left=Math.floor(g.left)+Math.max(o.documentElement.scrollLeft,o.body.scrollLeft);m.top=Math.floor(g.top)+Math.max(o.documentElement.scrollTop,o.body.scrollTop);m.left-=o.documentElement.clientLeft;m.top-=o.documentElement.clientTop;var n=o.body,q=parseInt(l(n,"borderLeftWidth")),j=parseInt(l(n,"borderTopWidth"));if(i.ie&&!i.isStrict){m.left-=isNaN(q)?2:q;m.top-=isNaN(j)?2:j}}else{p=f;do{m.left+=p.offsetLeft;m.top+=p.offsetTop;if(i.isWebkit>0&&l(p,"position")=="fixed"){m.left+=o.body.scrollLeft;m.top+=o.body.scrollTop;break}p=p.offsetParent}while(p&&p!=f);if(i.opera>0||(i.isWebkit>0&&l(f,"position")=="absolute")){m.top-=o.body.offsetTop}p=f.offsetParent;while(p&&p!=o.body){m.left-=p.scrollLeft;if(!i.opera||p.tagName!="TR"){m.top-=p.scrollTop}p=p.offsetParent}}return m};c.event=c.event||{};c.event._listeners=c.event._listeners||[];c.event.on=function(g,j,l){j=j.replace(/^on/i,"");g=c.dom._g(g);var k=function(n){l.call(g,n)},f=c.event._listeners,i=c.event._eventFilter,m,h=j;j=j.toLowerCase();if(i&&i[j]){m=i[j](g,j,k);h=m.type;k=m.listener}if(g.addEventListener){g.addEventListener(h,k,false)}else{if(g.attachEvent){g.attachEvent("on"+h,k)}}f[f.length]=[g,j,l,k,h];return g};c.on=c.event.on;(function(){var f=window[c.guid];c.lang.guid=function(){return"TANGRAM__"+(f._counter++).toString(36)};f._counter=f._counter||1})();window[c.guid]._instances=window[c.guid]._instances||{};c.lang.isFunction=function(f){return"[object Function]"==Object.prototype.toString.call(f)};c.lang.Class=function(f){this.guid=f||c.lang.guid();window[c.guid]._instances[this.guid]=this};window[c.guid]._instances=window[c.guid]._instances||{};c.lang.Class.prototype.dispose=function(){delete window[c.guid]._instances[this.guid];for(var f in this){if(!c.lang.isFunction(this[f])){delete this[f]}}this.disposed=true};c.lang.Class.prototype.toString=function(){return"[object "+(this._className||"Object")+"]"};c.lang.Event=function(f,g){this.type=f;this.returnValue=true;this.target=g||null;this.currentTarget=null};c.lang.Class.prototype.addEventListener=function(i,h,g){if(!c.lang.isFunction(h)){return}!this.__listeners&&(this.__listeners={});var f=this.__listeners,j;if(typeof g=="string"&&g){if(/[^\w\-]/.test(g)){throw ("nonstandard key:"+g)}else{h.hashCode=g;j=g}}i.indexOf("on")!=0&&(i="on"+i);typeof f[i]!="object"&&(f[i]={});j=j||c.lang.guid();h.hashCode=j;f[i][j]=h};c.lang.Class.prototype.removeEventListener=function(i,h){if(typeof h!="undefined"){if((c.lang.isFunction(h)&&!(h=h.hashCode))||(!c.lang.isString(h))){return}}!this.__listeners&&(this.__listeners={});i.indexOf("on")!=0&&(i="on"+i);var g=this.__listeners;if(!g[i]){return}if(typeof h!="undefined"){g[i][h]&&delete g[i][h]}else{for(var f in g[i]){delete g[i][f]}}};c.lang.Class.prototype.dispatchEvent=function(j,f){if(c.lang.isString(j)){j=new c.lang.Event(j)}!this.__listeners&&(this.__listeners={});f=f||{};for(var h in f){j[h]=f[h]}var h,g=this.__listeners,k=j.type;j.target=j.target||this;j.currentTarget=this;k.indexOf("on")!=0&&(k="on"+k);c.lang.isFunction(this[k])&&this[k].apply(this,arguments);if(typeof g[k]=="object"){for(h in g[k]){g[k][h].apply(this,arguments)}}return j.returnValue};c.lang.inherits=function(l,j,i){var h,k,f=l.prototype,g=new Function();g.prototype=j.prototype;k=l.prototype=new g();for(h in f){k[h]=f[h]}l.prototype.constructor=l;l.superClass=j.prototype;if("string"==typeof i){k._className=i}};c.inherits=c.lang.inherits})();var b="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/images/m";var a="png";var e=BMapLib.TextIconOverlay=function(f,h,g){this._position=f;this._text=h;this._options=g||{};this._styles=this._options.styles||[];(!this._styles.length)&&this._setupDefaultStyles()};d.lang.inherits(e,BMap.Overlay,"TextIconOverlay");e.prototype._setupDefaultStyles=function(){var h=[53,56,66,78,90];for(var g=0,f;f=h[g];g++){this._styles.push({url:b+g+"."+a,size:new BMap.Size(f,f)})}};e.prototype.initialize=function(f){this._map=f;this._domElement=document.createElement("div");this._updateCss();this._updateText();this._updatePosition();this._bind();this._map.getPanes().markerMouseTarget.appendChild(this._domElement);return this._domElement};e.prototype.draw=function(){this._map&&this._updatePosition()};e.prototype.getText=function(){return this._text};e.prototype.setText=function(f){if(f&&(!this._text||(this._text.toString()!=f.toString()))){this._text=f;this._updateText();this._updateCss();this._updatePosition()}};e.prototype.getPosition=function(){return this._position};e.prototype.setPosition=function(f){if(f&&(!this._position||!this._position.equals(f))){this._position=f;this._updatePosition()}};e.prototype.getStyleByText=function(i,h){var g=parseInt(i);var f=parseInt(g/10);f=Math.max(0,f);f=Math.min(f,h.length-1);return h[f]};e.prototype._updateCss=function(){var f=this.getStyleByText(this._text,this._styles);this._domElement.style.cssText=this._buildCssText(f)};e.prototype._updateText=function(){if(this._domElement){this._domElement.innerHTML=this._text}};e.prototype._updatePosition=function(){if(this._domElement&&this._position){var f=this._domElement.style;var g=this._map.pointToOverlayPixel(this._position);g.x-=Math.ceil(parseInt(f.width)/2);g.y-=Math.ceil(parseInt(f.height)/2);f.left=g.x+"px";f.top=g.y+"px"}};e.prototype._buildCssText=function(g){var h=g.url;var n=g.size;var k=g.anchor;var j=g.offset;var l=g.textColor||"black";var f=g.textSize||10;var m=[];if(d.browser.ie<7){m.push('filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'+h+'");')}else{m.push("background-image:url("+h+");");var i="0 0";(j instanceof BMap.Size)&&(i=j.width+"px "+j.height+"px");m.push("background-position:"+i+";")}if(n instanceof BMap.Size){if(k instanceof BMap.Size){if(k.height>0&&k.height<n.height){m.push("height:"+(n.height-k.height)+"px; padding-top:"+k.height+"px;")}if(k.width>0&&k.width<n.width){m.push("width:"+(n.width-k.width)+"px; padding-left:"+k.width+"px;")}}else{m.push("height:"+n.height+"px; line-height:"+n.height+"px;");m.push("width:"+n.width+"px; text-align:center;")}}m.push("cursor:pointer; color:"+l+"; position:absolute; font-size:"+f+"px; font-family:Arial,sans-serif; font-weight:bold");return m.join("")};e.prototype._bind=function(){if(!this._domElement){return}var g=this;var i=this._map;var f=d.lang.Event;function h(m,l){var k=m.srcElement||m.target;var j=m.clientX||m.pageX;var o=m.clientY||m.pageY;if(m&&l&&j&&o&&k){var n=d.dom.getPosition(i.getContainer());l.pixel=new BMap.Pixel(j-n.left,o-n.top);l.point=i.pixelToPoint(l.pixel)}return l}d.event.on(this._domElement,"mouseover",function(j){g.dispatchEvent(h(j,new f("onmouseover")))});d.event.on(this._domElement,"mouseout",function(j){g.dispatchEvent(h(j,new f("onmouseout")))});d.event.on(this._domElement,"click",function(j){g.dispatchEvent(h(j,new f("onclick")))})}})();
    
    

    在index.html引入

    展开全文
  • vue百度地图组件,点聚合

    千次阅读 热门讨论 2019-04-28 15:22:49
    vue项目中,安装百度地图组件后(在我的上一篇文章已介绍vue安装百度地图依赖包,以及使用(模块化引入百度地图)),但如何对点位进行聚合呢? 首先,我们可以看百度地图组件官网:注意红框框选(后面讲到官网这个...

    vue项目中,安装百度地图组件后(在我的上一篇文章已介绍vue安装百度地图依赖包,以及使用(模块化引入百度地图)),但如何对点位进行聚合呢?
    首先,我们可以看百度地图组件官网:注意红框框选(后面讲到官网这个bugger)
    在这里插入图片描述
    根据官网介绍,我们可以进行全局和局部注册,进而引入点聚合。
    局部注册:我们就可以按照官网介绍,首先引入包,然后进行注册:

    import {BmlMarkerClusterer} from 'vue-baidu-map'
    export default {
      components: {
        BmlMarkerClusterer
      }
    }
    

    全局注册:我们就可以按照官网介绍,在vue项目目录src文件下,配置main.js:

    import Vue from 'vue'
    import BaiduMap from 'vue-baidu-map'
    import {BmlMarkerClusterer} from 'vue-baidu-map'
    Vue.component('bml-marker-clusterer', BmlMarkerClusterer)
    

    重点来了,注意了,百度组件官网注册的聚合标签为bml-marker-cluster,而在聚合所使用的标签为bml-marker-clusterer(和上述我所框选的红框对比)
    在这里插入图片描述
    所以我们自己在进行引入聚合时,一定要将注册的标签保持一致(反之,找bugger很痛苦),直接上代码(我这里使用的为全局注册):

    <template>
        <baidu-map class="map"
            :center="{lng:121.477937,lat:31.23507}"
            :zoom='13'
            :scroll-wheel-zoom='true'
        >
        <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
        <bm-marker @click="infoWindowOpen" :position="{lng:121.477937,lat:31.23507}" :dragging="true" animation='BMAP_ANIMATION_BOUNCE'>
             <bm-label content='上海市市民之家' :labelStyle="{color:'red',fontSize:'12px'}" :offset="{width:-35,height:30}" />    
        </bm-marker>
        <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen='true'></bm-overview-map>
        <bml-marker-clusterer :averageCenter="true">
            <bm-marker @click="infoWindowOpen2" v-for="(marker,index) in markers" :key="index" :position="{lng:marker.longitude,lat:marker.latitude}">
            </bm-marker>
       </bml-marker-clusterer>
      </baidu-map>
    </template>
    <script>
    
     export default {
           name:'map',
           data(){
               return {              
                    markers:[],
                    show: true
               }
           },
           created(){
           },
           components:{
            //   BmlMarkerClusterer
           },
           mounted(){
             this.request();
           },
           methods:{
               // 加载页面即进入摄像机列表请求
    			request() {
    				const me = this;
    				me.markers = [];
    				this.axios.post("我自己调试的接口")	//获取点位的接口
    					.then(function (response) {			
    						if (response.data.code == 0) {                                        
    							const msg = response.data.msg;
                                me.markers = msg;
    						}
    					})
    					.catch(function (error) {
    						console.log(error);
    					})
                }
           }
    
       }
    

    得到的结果为:
    在这里插入图片描述
    为了进一步展示每个marker点的详细信息,通过官网介绍,我们可以使用bm-info-window标签进行添加(这里我就不详细介绍了,自己去官网查询),但是当我们对点位进行聚合后,却不能显示对应点位的信息,上代码对比:

    <template>
        <baidu-map class="map"
            :center="{lng:121.477937,lat:31.23507}"
            :zoom='13'
            :scroll-wheel-zoom='true'
        >
        <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
        <bm-marker @click="infoWindowOpen" :position="{lng:121.477937,lat:31.23507}" :dragging="true" animation='BMAP_ANIMATION_BOUNCE'>
             <bm-info-window :show="show" @close="infoWindowClose" @click="infoWindowOpen">上海市市民之家</bm-info-window>
             <!-- <bm-label content='上海市市民之家' :labelStyle="{color:'red',fontSize:'12px'}" :offset="{width:-35,height:30}" />     -->
        </bm-marker>
        <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen='true'></bm-overview-map>
        <bml-marker-clusterer :averageCenter="true">
            <bm-marker @click="infoWindowOpen2" v-for="(marker,index) in markers" :key="index" :position="{lng:marker.longitude,lat:marker.latitude}">
            <bm-info-window :show="show" @close="infoWindowClose" @click="infoWindowOpen">上海市市民之家</bm-info-window>
            </bm-marker>
       </bml-marker-clusterer>
      </baidu-map>
    </template>
    <script>
    
     export default {
           name:'map',
           data(){
               return {
                    markers:[],
                    show: true
               }
           },
           mounted(){
             this.request();
           },
           methods:{
               infoWindowClose () {
                 this.show = false
                },
                infoWindowOpen () {
                this.show = true
                },
               // 加载页面即进入摄像机列表请求
    			request() {
    				const me = this;
    				me.markers = [];
    				this.axios.post("我自己调试的接口")	//获取点位的接口
    					.then(function (response) {			
    						if (response.data.code == 0) {                                        
    							const msg = response.data.msg;
                                me.markers = msg;
    						}
    					})
    					.catch(function (error) {
    						console.log(error);
    					})
                }
           }
       }
    

    对应的结果如下:
    在这里插入图片描述
    上述问题待解决。

    百度组件官网:https://dafrok.github.io/vue-baidu-map/#/zh/index

    展开全文
  • vue百度地图聚合功能

    2019-12-26 15:20:20
    vue模块里面写入 <bml-marker-clusterer :averageCenter="true" :styles="markerStyles">///////////自定义聚合图标样式:styles="markerStyles" <bm-marker v-for="(i,index) in kedingweizhandian" :...

    在vue模块里面写入

          <bml-marker-clusterer :averageCenter="true" :styles="markerStyles">///自定义聚合图标样式:styles="markerStyles"
            <bm-marker v-for="(i,index) in kedingweizhandian" :position="{lng:i.lon,lat:i.lat}"  :icon="ic" @dblclick="shunagji(i)"     @click="fangda(i,index)" >
              <bm-info-window :show="inde===index" @close="inde=''" :width="wid">
              </bm-info-window>
    
            </bm-marker>
          </bml-marker-clusterer>
    
    

    把自定义的聚合图标引入当前模块并且挂在vue的实例上

      import mar0 from "./img/img/0.png";
      import mar1 from "./img/img/1.png";
      import mar2 from "./img/img/2.png";
      import mar3 from "./img/img/3.png";
      import mar4 from "./img/img/4.png";
      
     markerStyles:[
              {
                url:mar0,
                size:{
                  width:53,
                  height:53,
                }
              },
              {
                url:mar1,
                size:{
                  width:56,
                  height:56,
                }
              },
              {
                url:mar2,
                size:{
                  width:66,
                  height:66,
                }
              },
              {
                url:mar3,
                size:{
                  width:78,
                  height:78,
                }
              },
              {
                url:mar4,
                size:{
                  width:90,
                  height:90,
                }
              },
            ]
    
    展开全文
  • vue使用百度地图实现点聚合功能

    千次阅读 2019-05-07 14:38:34
    提出这个需求之后,我就去看了百度地图的api,发现文档里边只有那一两行代码,简单,于是在index.html中引入那两个js 然后代码添加 结果我放上去之后愣是不出效果,不知道是什么原因。 百度了好多,但是也...

    提出这个需求之后,我就去看了百度地图的api,发现文档里边只有那一两行代码,简单,于是在index.html中引入那两个js

    然后代码添加 

    结果我放上去之后愣是不出效果,不知道是什么原因。

    百度了好多,但是也没有发现问题,后来把文档的代码放在了html中,确实有效果,再仔细看自己的代码,发现唯一不一样的就是我的代码多了一行map.addOverlay这个东西,如下:

    果然注释之后效果实现了。 很好看啊,哈哈哈

    具体原因等我以后慢慢研究,先把这个问题记录下来。

    展开全文
  • vue百度离线地图点聚合问题

    千次阅读 2019-04-26 18:54:34
    vue百度离线地图点聚合问题 项目中,相同的代码。相同的聚合js文件,在vue中引入百度离线地图,刚开始是出现,地图点位不能聚合,于是从官网直接下载源文件,点聚合解决了,但出现InfoWindow(显示点位信息详情...
  • 百度地图点聚合实现自定义样式。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
  • 百度地图vue、加载海量点聚合) 1. 异步加载百度地图 export default function loadBMap (ak) { return new Promise((resolve, reject) => { //聚合API依赖基础库,因此先加载基础库再加载聚合API ...
  • 百度地图点聚合的聚合点样式修改

    千次阅读 2018-06-02 22:47:00
    百度地图点聚合的聚合点样式修改 学习了:https://blog.csdn.net/sut_haohaoxuexi/article/details/78542406 原文膜拜: 百度地图提供点聚合的功能,但是聚合之后的样式不一定会满足我们的需要: 点聚合会用到百度...
  • 修改源代码优化聚合点过于庞大,页面‘passive’警告高达数十万造成页面卡顿bug,增加扩展标注点文字,增加当前定位等一系列。可支持移动端h5.
  • 百度聚合点击事件(需要修改MarkerClusterer.js) this._clusterMarker.addEventListener('click', function (event) { thatMap.setViewport(thatBounds); // 放大地图 }); 为marker添加自定义属性 let marker = ...
  • MarkerClusterer.js 百度地图大数量点聚合js 优化急速版
  • 百度地图点聚合,加载1万个marker-附件资源
  • 公司要求做个百度地图点聚合的性能优化,需一次性加载9万条数据。 记录下自己的优化过程。(只想看优化代码的可直接移步:步骤三) 一、引入百度地图 vue项目中,在index.html文件中用script标签引入百度地图...
  • 在使用百度地图点聚合时,使用map.clearOverlays(); var allOverlay = map.getOverlays(); map.removeOverlay(allOverlay);都无法清除之前的点聚合,我想问怎么样才能清除之前的所有点聚合
  • $ npm install vue-baidu-map --save import Vue from 'vue' import BaiduMap from 'vue-baidu-map' ... // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_...
  • 目前的业务场景是:地图中有多个点的点聚合,聚合点展开后,每个marker有自己的点击事件,点击时显示窗口信息。 做法是marker.openInfoWindow(infowin); 问题来了,每次点击时地图会自动将窗口平移到地图中心,这时...
  • 百度地图自定义聚合点方法拓展

    千次阅读 2019-12-19 19:12:23
    这是一个百度地图自定义聚合样式和图层控制拓展方法的API。 在百度官方版本的基础上拓展了自定义方法,具体见下方说明。 拓展方法说明 MarkerClusterer.js 增加属性 type {Number} 自定义类型,用于方便...
  • 由于百度地图提供的MarkerClusterer_min.js 比较卡顿 特此提供加速后的MarkerClusterer_min.js 点击链接即可到百度网盘下载 链接:https://pan.baidu.com/s/1QJT7W7lm-93X2tnXHCmdQw 提取码:guow 源码如下:...
  • 百度地图 自制点聚合实例,工厂化覆盖物,并实例每一个覆盖物到指定经纬度,自定覆盖物样式,引入聚合api。进行点聚合显示
  • * @fileoverview MarkerClusterer标记聚合器用来解决加载大量要素到地图上产生覆盖现象的问题,并提高性能。 * 主入口类是<a href="symbols/BMapLib.MarkerClusterer.html">MarkerClusterer</a>, ...
  • 最近在使用Vue开发百度地图功能,首先就碰到了百度地图Api如何引入的问题,查了查,网上有N种加载方案,简单梳理了下,大体可以分为以下三种: 一、简单粗暴直接引入法 第一步、在index.html中添加百度地图api的...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 301
精华内容 120
关键字:

vue百度地图点聚合

vue 订阅