添加/動態地在谷歌地圖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); 
    }