Нарисуйте AdvancedMarkerElement в центре своего положения

Я рисую google.maps.markers.AdvancedMarkerElement на карте.

Я использую их как маркеры/контрольные точки для изменения пути полилинии.

Они рисуются произвольной формы (в основном прямоугольника).

Проблема в том, что маркер всегда находится выше позиции, к которой он привязан.

Мой код:

const parser = new DOMParser();
const pinSvg = parser.parseFromString(
        '<svg xmlns = "http://www.w3.org/2000/svg" height = "16px" viewBox = "0 -960 960 960" width = "16px" fill = "#000" " ><path d = "M214-74q-59.12 0-99.56-40.44Q74-154.88 74-214v-532q0-59.13 40.44-99.56Q154.88-886 214-886h532q59.13 0 99.56 40.44Q886-805.13 886-746v532q0 59.12-40.44 99.56Q805.13-74 746-74H214Z"/></svg>'
,
        "image/svg+xml"
      ).documentElement;

 let marker =
        new google.maps.marker.AdvancedMarkerElement({
          map: this.map as google.maps.Map,
          position: point.latLng,
          content: pinSvg,
          gmpDraggable: true,
          gmpClickable: true,
        });

Исход:

Неправильно центрирован элемент AdvancedMarkerElement

Как вы можете видеть, крестик (добавленный Google при наведении или захвате маркера) находится внизу маркера. Но мне нужно, чтобы маркер был правильно отцентрирован сверху.

Я попробовал изменить координаты viewbox или x и y. Ничего не помогло.

Это только исказило форму.

Есть ли у вас идеи, как я могу это исправить?

Задавая здесь вопрос, предоставьте минимальный воспроизводимый пример, позволяющий воспроизвести проблему, желательно в виде фрагмента стека.

— 29.07.2024 15:23

google-maps svg google-maps-api-3 google-maps-markers google-maps-advanced-marker-element

29.07.2024 14:53

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Предупреждение. Указанный вами путь SVG содержит синтаксические ошибки (слишком много двойных кавычек). Сначала исправьте это.

Есть 2 варианта.

Опция 1

Вы можете использовать функцию transform самого SVG. Размер вашего SVG составляет 16x16, поэтому вам нужно будет переместить ось Y на 8, чтобы он выглядел вертикально по центру.

<svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" viewBox = "0 -960 960 960" transform = "translate(0 8)" fill = "#000"><path d = "M214-74q-59.12 0-99.56-40.44Q74-154.88 74-214v-532q0-59.13 40.44-99.56Q154.88-886 214-886h532q59.13 0 99.56 40.44Q886-805.13 886-746v532q0 59.12-40.44 99.56Q805.13-74 746-74H214Z"/></svg>

Вот рабочая демонстрация:

async function initMap() {

  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const center = {
    lat: 0,
    lng: 0
  }
  
  const map = new Map(document.getElementById("map"), {
    center: center,
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });

  const parser = new DOMParser();
  const pinSvg = parser.parseFromString(
    '<svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" viewBox = "0 -960 960 960" transform = "translate(0 8)" fill = "#000"><path d = "M214-74q-59.12 0-99.56-40.44Q74-154.88 74-214v-532q0-59.13 40.44-99.56Q154.88-886 214-886h532q59.13 0 99.56 40.44Q886-805.13 886-746v532q0 59.12-40.44 99.56Q805.13-74 746-74H214Z"/></svg>', "image/svg+xml"
  ).documentElement;

  let marker = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: center,
    content: pinSvg
  });

  let defaultMarker = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: center
  });
}

initMap();

#map {
  height: 150px;
}

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

<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p = "The Google Maps JavaScript API",c = "google",l = "importLibrary",q = "__ib__",m=document,b=window;b=b[c]||(b[c] = {});var d=b.maps||(b.maps = {}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "weekly"});</script>

Вариант 2

Второй вариант — выполнить преобразование с помощью CSS.

Используйте marker.content.style.transform = 'translateY(8px)'

или

marker.content.style.transform = 'translateY(50%)'

Вот вторая рабочая демонстрация:

async function initMap() {

  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const center = {
    lat: 0,
    lng: 0
  }
  
  const map = new Map(document.getElementById("map"), {
    center: center,
    zoom: 14,
    mapId: "4504f8b37365c3d0",
  });

  const parser = new DOMParser();
  const pinSvg = parser.parseFromString(
    '<svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" viewBox = "0 -960 960 960" fill = "#000"><path d = "M214-74q-59.12 0-99.56-40.44Q74-154.88 74-214v-532q0-59.13 40.44-99.56Q154.88-886 214-886h532q59.13 0 99.56 40.44Q886-805.13 886-746v532q0 59.12-40.44 99.56Q805.13-74 746-74H214Z"/></svg>', "image/svg+xml"
  ).documentElement;

  let marker = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: center,
    content: pinSvg
  });
    
  marker.content.style.transform = 'translateY(50%)'

  let defaultMarker = new google.maps.marker.AdvancedMarkerElement({
    map: map,
    position: center
  });
}

initMap();

#map {
  height: 150px;
}

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

<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p = "The Google Maps JavaScript API",c = "google",l = "importLibrary",q = "__ib__",m=document,b=window;b=b[c]||(b[c] = {});var d=b.maps||(b.maps = {}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "weekly"});</script>

29.07.2024 15:38