Добавить / удалить изображение динамически из элементов управления в Google Maps V3 - PullRequest
Новая
       19

Добавить / удалить изображение динамически из элементов управления в Google Maps V3

1 голос
/ 31 марта 2012

Привет всем,

Я работаю над небольшим приложением, которое добавит и удалит изображение белка в элемент управления приложения Google Maps (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);   
        }
    });
}

1 Ответ

2 голосов
/ 31 марта 2012

Добавьте последнюю строку. 

   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);
   }
...