Добавить маркер моего местоположения в Google Map с другими маркерами из Wordpress API

Question

Я ищу правильный способ добавить свое местоположение на карту. Моя карта показывает маркеры из событий.

Функция добавления маркера и масштабирования карты до уровня 12 должна запускаться, если пользователь нажимает кнопку («Где я?»).

МожетКто-нибудь помочь мне с этим?

var map;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.5, 10.5),
    zoom: 6
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

Посмотреть на codepen

Answer 1

Функция, подобная приведенной ниже, возвращает координаты местоположения пользователя в объекте {lat, lng}:

function getCurrentLocation() {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) reject(new Error('Get User Location error'));
    else {
      return Promise.resolve(
        navigator.geolocation.getCurrentPosition(position => {
          let currentCoordinates = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          resolve(currentCoordinates);
        }),
      );
    }
  });
}

Функция вызывает функцию браузера navigator.geolocation.getCurrentPosition(), которая возвращает координаты пользователяесли он включен. Функция является асинхронной (т. Е. Ее запуск займет некоторое время, и вашему коду придется ждать завершения операции), поэтому ее следует вызывать следующим образом (обратите внимание на ключевые слова async и await):

function async callingFunction() {
  let userLocationCoords = await getCurrentLocation()
  let userLocationMarker = new google.maps.Marker({
      position: userLocationCoords,
      map: map,
    });
  ...
}

Это приводит к тому, что код «ждет», пока функция getCurrenLocation () завершит работу, прежде чем двигаться дальше.

Обратите внимание, что это не будет работать, если соединение http, а не https (по крайней мере, в Chrome)), но он должен работать в вашем Codepen, который является https. Кроме того, пользователю будет предложено разрешить веб-сайту доступ к их местоположению, которое он должен принять, чтобы функция работала.

Получив координаты пользователя, вы можете добавить маркер на карту с помощьюиспользуя new google.maps.Marker() и предоставляя ему координаты {lat, lng} маркера и объекта карты, к которому вы хотите добавить его, в соответствии с кодом выше.