web-dev-qa-db-ja.com

Googleマップでマーカーのアイコンを配置する方法

Googleマップでは、通常、マーカーの画像の中央下部は、マークする必要があるポイントの緯度経度です。

私のマーカーアイコンが円であると想像してください、私はその中心が与えられたポイントの緯度経度にあることを望みます...

コード：

var image_hotspot = 'img/icons/bank_euro.png';
var marker = new google.maps.Marker({
      map: map,
      position: placeLoc,
      icon: image_hotspot
    });
javascriptgoogle-mapsgoogle-maps-markers
30
illinois

必要なのは、MarkerImageオブジェクトを作成することです。例えば：

var markerImage = new google.maps.MarkerImage('img/icons/bank_euro.png',
                new google.maps.Size(30, 30),
                new google.maps.Point(0, 0),
                new google.maps.Point(15, 15));

ここで、最初のパラメーターは画像のURL、2番目は画像サイズ、3番目は画像の原点、4番目はマーカーが指す画像上の位置です。マーカーが円の場合、4番目のパラメーターを画像の中心に設定します。そして、markerImageをアイコンプロパティに渡すマーカーを作成します。

var marker = new google.maps.Marker({
  map: map,
  position: placeLoc,
  icon: markerImage
});
35
WojtekT

ドキュメントから：

MarkerImageオブジェクトを変換してアイコンを入力する

var image = new google.maps.MarkerImage(
    place.icon,
    new google.maps.Size(71, 71),
    new google.maps.Point(0, 0),
    new google.maps.Point(17, 34),
    new google.maps.Size(25, 25));

になる

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  Origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

https://developers.google.com/maps/documentation/javascript/markers

9
Sabino Velasquez

Googleマップのv3では、次を使用できます/使用する必要があります。

new maps.Marker({
            ...
            icon: {
                url: '.../myimage.png',
                scaledSize: new maps.Size(60, 30),
                anchor: new maps.Point(30, 30),
            },
        });

https://developers.google.com/maps/documentation/javascript/reference#Icon

6
velop

AddMarkerを使用していて、Point（x、y）を使用してx、y座標を設定する必要がある場合

let markerInstance = mapInstance.addMarker({
            lat : _lat,
            lng : _lng,
            label: '8',
            icon : {
              url :  'url_image.png',
              Origin:  new google.maps.Point(0, 0),
            }
        });
0
wilfredonoyola