添加/动态地在谷歌地图V3

Question

Greetigns大家控件删除图片，

我工作的一个小应用程序，将添加和删除松鼠的图像，以谷歌地图应用程序的控制（http://www.geogodesigns.com/projects/squirrel/indexTest.html）。奇怪，是的，我知道。

如果您查看该网站，您会看到我可以通过单击“松鼠”按钮来添加和移除松鼠。然而，随后增加和减少松鼠会使小动物匆忙下图。嗯...

我想要的是让松鼠呆在同一个地方，就在Google底图控件下面，每次我点击'松鼠'按钮。这是一个艰难的突破。

(function() { 
    window.onload = function() { 
     var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
     var myOptions = { 
      zoom: 10, 
      center: chicago, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     map = new google.maps.Map(document.getElementById("map"), myOptions); 

     var homeControlDiv = document.createElement('DIV'); 
     var homeControl = new HomeControl(homeControlDiv, map); 
     homeControlDiv.index = 1; 
     map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); 
    }; 
})(); 

function HomeControl(controlDiv, map) { 

    controlDiv.style.padding = '5px'; 
    var controlUI = document.createElement('DIV'); 
    controlUI.style.backgroundColor = 'white'; 
    controlUI.style.borderStyle = 'solid'; 
    controlUI.style.borderWidth = '2px'; 
    controlUI.style.cursor = 'pointer'; 
    controlUI.style.textAlign = 'center'; 
    controlUI.title = 'Show squirrel'; 
    controlDiv.appendChild(controlUI); 

    var controlText = document.createElement('DIV'); 
    controlText.style.fontFamily = 'Arial,sans-serif'; 
    controlText.style.color = 'black'; 
    controlText.style.fontSize = '12px'; 
    controlText.style.paddingLeft = '4px'; 
    controlText.style.paddingRight = '4px'; 
    controlText.innerHTML = '<b>Squirrel</b>'; 
    controlUI.appendChild(controlText); 

    var imageDiv = document.createElement('DIV'); 
    imageDiv.setAttribute('id','imageDiv'); 

    google.maps.event.addDomListener(controlUI, 'click', function() { 
     if(document.getElementById('image')){ 
      controlUI.style.backgroundColor = 'white'; 
      controlText.style.color = 'black'; 
      var oldimage = document.getElementById('image'); 
     imageDiv.removeChild(oldimage); 
     } 
     else{ 
      controlUI.style.backgroundColor = 'black'; 
      controlText.style.color = 'white'; 
      var image = document.createElement('IMG'); 
     image.setAttribute('id','image'); 
     image.src = 'http://www.geogodesigns.com/projects/squirrel/img/squirrel.jpg'; 
     imageDiv.appendChild(image); 
     map.controls[google.maps.ControlPosition.RIGHT].push(imageDiv); 
     } 
    }); 
} 

Answer 1

添加最后一行。

if(document.getElementById('image')){ 
     controlUI.style.backgroundColor = 'white'; 
     controlText.style.color = 'black'; 
     var oldimage = document.getElementById('image'); 
     imageDiv.removeChild(oldimage); 
     map.controls[google.maps.ControlPosition.RIGHT].pop(oldimage); 
    }