Google Maps OverlayView: make only SVG clickable

问题

I have a Google Map with multiple SVG overlays. But when I add a click event on these SVG, all the overlay is clickable and I want it to work only for the SVG path.

Here's a fiddle https://jsfiddle.net/gmkfhr9s/1/

I'm using the Custom overlays documentation as a base 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';
  });
};

You can see that, with the mouseover event, all the overlay (the bordered box) is selected and ont only the SVG.

Is it possible to make only the SVG clickable ?

This thread is a similar problem if this can help you.

EDIT :

@Sphinxxx's answer works well.

I just want to add that, if you have multiple SVGs with some of them above others, you'll have to add this CSS to be able to click on them.

svg {
  pointer-events: none;
}
path {
  pointer-events: all;
}

回答1:

First of all, to control the SVG's inner <path>s you need the SVG element itself, you can't access them through an image with an external SVG url.

Once you have your SVG element (the easiest is to include the SVG markup in your HTML), this article has a good example on how to use that SVG as a map overlay: http://serversideguy.com/2017/10/31/how-do-i-place-svgs-on-a-google-map-using-custom-overlays/

I have made a complete example here: 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';
}

来源：https://stackoverflow.com/questions/41913388/google-maps-making-svg-overlays-clickable

标签

javascript

google-maps

svg

google-maps-api-3