Как повернуть метку google maps чтобы выглядело вот так?

Question

[Alice777]

Comments

[freeExec]

Даёшь каждый день по одинаковому вопросу!

[Alice777]

freeExec, умираю, уже сума сошел, немогу решить

[freeExec]

Alice777, Ну ты блин даёшь, у маркера есть точка крепления, ну так сдвинь её в бок. Есть же куча примеров с кастомными маркерами.

[Alice777]

Это само собой,так я сначала и сделал(позишином высталил точку), но при увеличении ли уменьшении масштаба, метка сдвигается и показывает не на мой город, а на точку, которая находится в самом низу иконки

[Растишка]

Alice777, Ты читать умеешь вообще?

у маркера есть точка крепления, ну так сдвинь её в бок

[Alice777]

точка крепления - я понимаю, но как ее сдвинуть то? какое свойство за это отвечает?

Answer 1

[freeExec]

Вот тебе и современные студенты, в век гугла не найти на этом самом гугле. Я боюсь представить, что будешь делать с карточками в библиотеке.
А всего-то надо открыть раздел Маркеры и увидеть такой код, там даже расписано, что да как.

function setMarkers(map) {
  // Adds markers to the map.

  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.

  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  var image = {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  };
  // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.
  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };
  for (var i = 0; i < beaches.length; i++) {
    var beach = beaches[i];
    var marker = new google.maps.Marker({
      position: {lat: beach[1], lng: beach[2]},
      map: map,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
  }
}

Comments

[Alice777]

гуглил много, в том то и дело, что все что мог перепробовал, эту функцию тоже тестил, вот сейчас второй раз - проблема в том, что эти нью гугл мапс поинт
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(5, 5)

ставят метку в указанные мною точки, да, но при изменении зума маркер не меняет положения и находится фиксированно, например в левом нижнем гулу(то есть не зависит от масштаба и при первом же зумировании само собой метка не показывает на нужный мне город)

[freeExec]

Alice777, Масштаб на метку никак не должен влиять, так что давайте свой пример на jsfiddle.

[Alice777]

freeExec, смотрите, https://jsfiddle.net/x4gM4/106/
Левая точка ромба должна показывать на Минск.
При минимальном зуме она показывает на черное море.
При крупном зуме, метка смещается и не показывает на мнск.
Где я чего-то не учел? спасибо

[freeExec]

Alice777, Чесное слово, откуда вы такие кривые цифры взяли? Должно быть:

position: {lat: 53.9, lng: 27.55},
        icon: {
            url: "https://cdn3.iconfinder.com/data/icons/basic-mobile-part-2/512/diamonds-256.png",
           origin: new google.maps.Point(0, 0),
           anchor: new google.maps.Point(25, 128)

        }

[Alice777]

freeExec, Спсибио, вы очень выпучили, нужно правильно координаты указывать, всего вам наилучшего!