Question

我过去常常使用Google地图V2，但性能没有问题。在我不得不升级到V3后，我注意到渲染标记对浏览器产生了相当大的影响，并且经常使它略微悬挂。因为我每10秒左右更新一次标记，所以这会产生深远的影响。

在我读到的任何地方都有我做错的事情表明V3是对速度的改进。即使地图平移似乎也较慢。

调试到控制台显示更新标记最多可能需要120毫秒，即setPosition（）。然而，当我第一次绘制标记时，它几乎是即时的，添加标记只需要10毫秒，这很奇怪。

以下是代码：

function createMarkerWithHandler(device, point, marker_type, dPoint)
{
    bounds_.extend(point);

    var lblclass = "markerLabel";
    var marker_display_text = device.dpt;
    var zIndex = getMarkerZIndex(marker_type);
    var qp = 0;

    lblclass += device.ol==STATUS_NOLOCK ? " m_nl" : " m_ol");

    if(device.qp > 0)
        qp = device.qp;

    var tracker = trackingcache_.getTracker(device.id); 

    if(tracker.isValid()) {
        // update
        tracker.update({
            zIndex: zIndex,
            layer: qp,
            labelClass: lblclass,
            labelStyle: {zIndex: zIndex },
            position: point
        });     
    } else {
        // create the google maps marker
        var marker = new MarkerWithLabel({
               map: layout_.Map,
               icon: customIcons_[marker_type],            
               position: point,
               draggable: false,
               zIndex: zIndex,
               labelContent: marker_display_text,
               labelClass: lblclass, // the CSS class for the label
               labelStyle: { zIndex: zIndex },
               layer: qp
             });

        tracker = trackingcache_.add(device.id, marker);        
    }

    tracker.setEventListener({
        device: device,
        location: dPoint
    });

    lblclass = null;
    marker_display_text = null;
    zIndex = null;
    device = null;
    dPoint = null;

    // add it to our tracking cache
    return tracker;
}

function TrackerObj(deviceid, marker)
{
    this.marker_ = marker;
    this.valid_ = deviceid.length > 0;
    this.id_ = deviceid;
    this.updated_ = this.valid_;
    this.eventListener_ = null;
    this.options_ = null;

    this.unregisterEventListener = function() {
        if(this.eventListener_) {
            google.maps.event.removeListener(this.eventListener_);
            this.eventListener_ = null;
        }
    };

    this.registerEventListener = function() {       
        var me = this;

        if(this.options_) {
            this.addListener(function() {
                closure_getGeoAddress(me.options_.device, this, me.options_.location, me.getLatLng());
            });                 
        }
    };
};

TrackerObj.prototype.update = function(options) {
    var current;
    var labelClass;

    var marker = this.getMarker();
    if(marker) {
        labelClass = marker.get("labelClass");

        if(labelClass !== options.labelClass) {
            marker.label.setLayer(options.layer);
            marker.set("labelClass", options.labelClass);
            marker.setZIndex(options.zIndex);
        }

        current = this.getLatLng();

        if(!current.equals(options.position)) {         
            // NOTE:  This code is taking upto 100ms
            marker.setPosition(options.position);           
        }       
    }

    this.updated_ = true;
};
TrackerObj.prototype.setEventListener = function(options) {
    this.options_ = options;

    if(!this.eventListener_) {          
        this.registerEventListener();
    }           
};

Answer 1

对于动画标记，请在optimized: false对象中设置MarkerOptions。这将禁用画布标记的使用并恢复到基于DOM的标记，如V2中。可拖动标记就是这种情况。

渲染和更新谷歌标记太慢

1 个答案: