带标记的自定义标签

Question

我正在使用此link在我的Google地图应用中添加Ruler

当我点击按钮i.e Get Measure时，带有标签的两个标记在地图上显示效果非常好，直到我不刷新我的网页。当我刷新我的页面然后再次单击按钮时出现错误

InvalidValueError: setMap: not an instance of Map, and not an instance of StreetViewPanorama

此部分代码出现错误

function Label(opt_options)
{
// Initialization
try
{
    console.log(opt_options);
    this.setValues(opt_options); // Error Generate due to this line although its map object already i checked in console
}
catch(error)
{
    console.log(error);
}

// Label specific

var span = this.span_ = document.createElement('span');
span.style.cssText = 'position: relative; left: 0%; top: -8px; ' +
    'white-space: nowrap; border: 0px; font-family:arial; font-weight:bold;' +
    'padding: 2px; background-color: #ddd; '+
    'opacity: .75; '+
    'filter: alpha(opacity=75); '+
    '-ms-filter: "alpha(opacity=75)"; '+
    '-khtml-opacity: .75; '+
    '-moz-opacity: .75;';
var div = this.div_ = document.createElement('div');
div.appendChild(span);
div.style.cssText = 'position: absolute; display:none';
};

更新1

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options)
{
// Initialization
try
{
    console.log(opt_options);
    this.setValues(opt_options);
}
catch(error)
{
    console.log(error);
}

// Label specific

var span = this.span_ = document.createElement('span');
span.style.cssText = 'position: relative; left: 0%; top: -8px; ' +
    'white-space: nowrap; border: 0px; font-family:arial; font-weight:bold;' +
    'padding: 2px; background-color: #ddd; '+
    'opacity: .75; '+
    'filter: alpha(opacity=75); '+
    '-ms-filter: "alpha(opacity=75)"; '+
    '-khtml-opacity: .75; '+
    '-moz-opacity: .75;';
var div = this.div_ = document.createElement('div');
div.appendChild(span);
div.style.cssText = 'position: absolute; display:none';
};
Label.prototype = new google.maps.OverlayView;
// Implement onAdd
Label.prototype.onAdd = function()
{
var pane = this.getPanes().overlayLayer;
pane.appendChild(this.div_);

// Ensures the label is redrawn if the text or position is changed.
var me = this;
this.listeners_ = [
    google.maps.event.addListener(this, 'position_changed',
    function() { me.draw(); }),
    google.maps.event.addListener(this, 'text_changed',
    function() { me.draw(); })
];
};
// Implement onRemove
Label.prototype.onRemove = function()
{
this.div_.parentNode.removeChild(this.div_ );
// Label is removed from the map, stop updating its position/text.
for (var i = 0, I = this.listeners_.length; i < I; ++i)
{
    google.maps.event.removeListener(this.listeners_[i]);
}
};
// Implement draw
Label.prototype.draw = function()
{
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel(this.get('position'));
var div = this.div_;
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';
div.style.display = 'block';
this.span_.innerHTML = this.get('text').toString();
};

更新2

以下是Label调用

的代码

try{
var ruler1 = new google.maps.Marker({
            position: Mappy.mapObject.getCenter(),
            icon:'images/currenrLocation.png',
            map: Mappy.mapObject,
            draggable: true
        });
        var latlng = new google.maps.LatLng(ruler1.getPosition().lat()+0.001, ruler1.getPosition().lng());
        var ruler2 = new google.maps.Marker({
            position: latlng,
            map: Mappy.mapObject,
            draggable: true
        });
        //alert('Marker 1 2 Created');
        var ruler1label = new Label({ map: Mappy.mapObject });
        var ruler2label = new Label({ map: Mappy.mapObject });
        //alert('Label 1 2 Created');
        ruler1label.bindTo('position', ruler1, 'position');
        ruler2label.bindTo('position', ruler2, 'position');
        //alert('Label 1 2 Binded');
        var rulerpoly = new google.maps.Polyline({
            path: [ruler1.position, ruler2.position] ,
            strokeColor: "#FFFF00",
            strokeOpacity: .7,
            strokeWeight: 7
        });
        //alert('Polyline Created');
        rulerpoly.setMap(Mappy.mapObject);

        ruler1label.set('text',Mappy.rulerDistance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
        ruler2label.set('text',Mappy.rulerDistance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
        //alert('');
        google.maps.event.addListener(ruler1, 'drag', function() {
            rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
            ruler1label.set('text',Mappy.rulerDistance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
            ruler2label.set('text',Mappy.rulerDistance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
        });

        google.maps.event.addListener(ruler2, 'drag', function() {
            rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
            ruler1label.set('text',Mappy.rulerDistance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
            ruler2label.set('text',Mappy.rulerDistance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
        });
        }catch(error){
            alert(error);
        }

//code of Mappy.mapObject is
Mappy.mapObject = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
//And mapOption are simple latlng position and map zoom level contained