Проблема с API Карт Google с размером пути к значку маркера SVG на ноутбуке с сенсорным экраном - PullRequest
Новая
       123

Проблема с API Карт Google с размером пути к значку маркера SVG на ноутбуке с сенсорным экраном

1 голос
/ 21 июня 2020

Я пытаюсь отобразить маркеры Google Maps с круглым значком в качестве пути SVG.

У меня есть это HTML: 

<div id="map-canvas"></div>

И это javascript: 

function initialize() {

  let mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(48, 20)
  }

  let map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions)

  let circle = {
    path: 'M 1, 2 a 1,1 0 1,1 2,0 a 1,1 0 1,1 -2,0',
    anchor: new google.maps.Point(2, 2),
    scale: 10
  }

  let marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: circle,
    map: map
  })
}

google.maps.event.addDomListener(window, 'load', initialize);

http://jsfiddle.net/ea32j950/

Карты Google отображают путь SVG как тег img внутри тега div.

Без сенсорного экрана, оба тега имеют рассчитанные размеры width: 30px; height: 30px;, что соответствует ожиданиям (во всех протестированных мной браузерах).

enter image description here

But on a laptop with touchscreen there are some unexpected margins rendered. Both img and div tag have calculated dimensions width: 46px; height: 46px;. Both in Chrome and Firefox:

enter image description here

How can I prevent this difference? Is there a way to override the setting window.navigator['maxTouchPoints'] of the client?

Edit: "Device Manager -> Human Interface Devices -> HID-compliant touch screen -> Disable" seems to cause window.navigator['maxTouchPoints'] = 0 and the issue is gone. Is there any other workaround, which keeps the touchscreen functionality outside of the webpage?

When I draw two markers close to each other, hovering over the marker with lower z-index causes the tooltip of the other marker to show up due to the margin.

I have tried setting a circular MarkerShape, но проблема остается: http://jsfiddle.net/shrt8axj/

Изменить: В итоге я открыл новую проблему с Google.

...