Super put a marker on a map with layer

Question

Super put a marker on a map with layer

Navigation

#1 by (1 votes)

1

I have a map with this

And I want that when clicking on a marker, an opaque gray layer appears, but the marker is superimposed, something like this.

The layer I put it with css

<div id="map" style="width:100%; height:93vh;"></div>
<div ng-show="vm.show" onClick="vm.show=false" style="position: absolute; left: 0px; top:0px; bottom:0px; background:#000000; opacity:0.5; width:100%; height:100%;  color:#FFFFFF; z-index:10;">

And I send him to call with this event:

marker.addListener('click', function() {
                _markers[this.id].setZIndex(10000);
                vm.show = true;
            });

javascript angularjs

asked by Jolquera 05.08.2016 в 23:16

source

1 answer

text recognition by photo with the api of card.io [closed] How to export code lines to a .sql file

score 1 · Answer 1

setZIndex sets the level within the map, it is not related to the CSS properties and how the overlay you use outside the map is below it. Keep in mind that the map works on a canvas, not an element as such.-

For the solution either you put the overlay in the KML, or you can try this trick: change src of the image when you click modifying the url and that to url of different image change the z-index via CSS ..

CSS

img[src*="overlay"] {
  z-index: 11; /* al menos 1 mas que el overlay */
}

Angular JS (in the controller you must inject the $ scope to be able to use $ apply)

marker.addListener('click', function() {
  this.setIcon('icono.png?overlay'); // aqui el truco
  $scope.$apply(function () {
    vm.show = true;
  });      
});

Then in the routine where the overlay is removed

  this.setIcon('icono.png'); // vuelta a al nivel normal
  vm.show = false;           // usa $apply si esta fuera del ciclo de digest.