Google Maps OverlayView: сделайте кликабельным только SVG

avatar
Corentin Le Fur
14 мая 2018 в 09:25
1408
1
3

У меня есть карта Google с несколькими наложениями SVG. Но когда я добавляю событие клика в эти SVG, все наложения кликабельны, и я хочу, чтобы они работали только для пути SVG.

Вот скрипка https://jsfiddle.net/gmkfhr9s/1/

Я использую документацию Пользовательские наложения в качестве основы https://developers.google.com/maps/documentation/javascript/customoverlays

USGSOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.borderStyle = 'dotted';
  div.style.borderWidth = '2px';
  div.style.borderColor = 'white';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);

  //add element to clickable layer
  this.getPanes().overlayMouseTarget.appendChild(div);

  google.maps.event.addDomListener(img, 'mouseover', function() {
    img.style.opacity = '0.5';
  });
  google.maps.event.addDomListener(img, 'mouseout', function() {
    img.style.opacity = '1';
  });
};

Вы можете видеть, что при наведении курсора мыши выбрано все наложение (рамка с рамкой), а не только SVG.

Можно ли сделать кликабельным только SVG?

Эта тема представляет собой аналогичную проблему, если это может вам помочь.


РЕДАКТИРОВАТЬ:

Ответ @Sphinxxx работает хорошо.

Я просто хочу добавить, что если у вас есть несколько SVG, некоторые из которых находятся выше других, вам нужно будет добавить этот CSS, чтобы иметь возможность нажимать на них.

svg {
  pointer-events: none;
}
path {
  pointer-events: all;
}
Источник

Ответы (1)

avatar
Sphinxxx
15 мая 2018 в 20:42
1

Во-первых, для управления внутренними элементами SVG <path> вам нужен сам элемент SVG, вы не можете получить к ним доступ через изображение с внешним URL-адресом SVG.

После того как у вас есть элемент SVG (проще всего включить разметку SVG в ваш HTML), в этой статье есть хороший пример того, как использовать этот SVG в качестве наложения карты: http://serversideguy.com /2017/10/31/как-разместить-svgs-на-карте-google-используя-пользовательские-оверлеи/

Я сделал полный пример здесь: https://codepen.io/Sphinxxxx/pen/wjEyMm

/**
    Will be called when the map is ready for the overlay to be attached.
*/
onAdd() {
    const svg = this.svg;
    svg.style.position = 'absolute';

    //Add the SVG element to a map pane/layer that is able to receive mouse events:
    const panes = super.getPanes();
    panes.overlayMouseTarget.appendChild(svg);
}

/**
    Whenever we need to (re)draw the overlay on the map, including when first added.
*/
draw() {
    //Here, we need to find the correct on-screen position for our image.
    //To achieve that, we simply ask the map's projection to calculate viewport pixels from the image's lat/lng bounds:
    const projection = super.getProjection(),
          bounds = this.bounds,
          sw = projection.fromLatLngToDivPixel(bounds.getSouthWest()),
          ne = projection.fromLatLngToDivPixel(bounds.getNorthEast());

    //Place/resize the SVG element:
    const s = this.svg.style;
    s.left = sw.x + 'px';
    s.top  = ne.y + 'px';
    s.width  = (ne.x - sw.x) + 'px';
    s.height = (sw.y - ne.y) + 'px';
}