API Карт Google - смещение для изображения маркера - замена маркера - не в геопозиции

У меня есть образ (круг), который должен указывать на конкретную столичную область. Также у меня есть GeoPosition всех моих соответствующих областей.

Если я помещаю свои маркеры, нижняя часть моего изображения находится на отметке GeoPosition. Но из-за его аэрофотоснимка я хотел бы сделать изображение смещением, поэтому центр моего изображения cirle находится в этом GeoPosition...

Любые идеи, как достичь этого?

Спасибо!

Ответ 1

Благодаря LeJared я нашел решение. Моя проблема заключалась в том, что я думал, что MarkerImage заменяет Marker. Но сначала нужно определить изображение и вставить его позже в Marker.

Пример:

Сначала определите образ:

var image = new google.maps.MarkerImage("some/path/image.png",
        // This marker is 20 pixels wide by 32 pixels tall.
        null, 
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        new google.maps.Point(75, 35)
    );

Затем вставьте его в обычный маркер:

    var myMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: "My Title",
    });

Ответ 2

Начиная с Google API версии 3.11, MarkerImage был заменен на Icon. Итак, вот новый способ масштабирования маркера до 50 пикселей и его расположение таким образом, чтобы его центр находился на геолокации:

var image = {
        url: '/some/path/image.png',
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(25, 25),
        scaledSize: new google.maps.Size(50, 50)
    };

var myMarker = new google.maps.Marker({
      position: position,
      icon: image,
      title: 'title',
      map: map
    });

Ответ 3

Вы должны указать, где находится опорная точка в вашем файле markerImage. См. Документы: https://developers.google.com/maps/documentation/javascript/reference?hl=de#MarkerImage

Если не указано Google считать центром нижнего края вашего MarkerImage в качестве точки привязки.

Вот пример в документах API, как построить сложный маркер с правильным маркером. https://google-developers.appspot.com/maps/documentation/javascript/examples/icon-complex?hl=de

Ответ 4

Вот мой пример.

new google.maps.Marker({
  position: pos,
  map: map,
  icon: {
    url: src,
    anchor: new google.maps.Point(25, 25),
    origin: new google.maps.Point(0, 0),
    scaledSize: new google.maps.Size(50, 50)
  }
});