如何更改 Google Maps JavaScript API 多边形标记样式

Question

我想更改 Google Maps JavaScript API 中多边形标记（由 DrawingManager 生成）的样式。

这就是我现在拥有的

我想做的是使带有蓝色轮廓的白色圆圈比现在更大。我知道我可以在哪里修改颜色，但看不到大小、形状或位置。我应该在哪里寻找这个？有人完成了我正在尝试的事情吗？

Answer 1

通过使用突变观察器来监听 DOM 添加来解决它：

 /**  
 * Check if Node is a dot and update styles
 * @param {Node} node - Node to examine and possibly update
 */
const checkIfNodeIsADotAndUpdateStyles = node => {
  const STYLE_ADDITIONS =
    '; height: 25px; width: 25px; border-radius: 100%; left: -2px; top: -2px;'

  const styleAttr = node.getAttribute('style')
  const correctHeight = styleAttr.includes('height: 9px')
  const correctWidth = styleAttr.includes('width: 9px')
  const correctRadius = styleAttr.includes('border-radius: 6px')

  if (correctWidth && correctHeight && correctRadius) {
    node.setAttribute('style', styleAttr + STYLE_ADDITIONS)
  }
}

/**
 * Check passed in `mutationList` for added nodes. If any nodes were added,
 * pass them to `checkIfNodeIsADotAndUpdateStyles`.
 * @param  {MutationRecord[]} mutationsList - Mutation list to iterate over
 */
const checkForAndProcessAddedNodes = (mutationsList) => {
  try {
    mutationsList.forEach(mutation => {
      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
        mutation.addedNodes.forEach(checkIfNodeIsADotAndUpdateStyles)
      }
    })
  } catch (err) {
    logger.warn(err)
  }
}

/**
 * Listen for changes to the DOM
 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver}
 * @param  {HTMLElement} ref - DOM element to observe
 * @return {Function} - MutationObserver disconnect function
 */
export const listenForDomChanges = (ref) => {
  // Setup observer to listen for additions/removals
  const config = { childList: true, subtree: true }

  // Create an observer that calls `checkForAndProcessAddedNodes` on mutations
  const observer = new MutationObserver(checkForAndProcessAddedNodes)

  // Start observing the target
  observer.observe(ref, config)

  // Return disconnect function
  return observer.disconnect
}