从 Google Maps V3 的控件中动态添加/删除图像

Question

大家好，

我正在开发一个小应用程序，它将向 Google 地图应用程序的控件 (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);
   }