web-dev-qa-db-ja.com

Googleマップのマーカーアイコン画像のサイズを変更する

画像をマーカーのiconプロパティにロードすると、元のサイズで表示されます。これは本来のサイズよりはるかに大きいものです。

標準サイズに合わせてサイズを変更したいのですが。これを行うための最良の方法は何ですか？

コード：

function addMyPos(latitude,longitude){
  position = new google.maps.LatLng(latitude,longitude)
  marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: "../res/sit_marron.png"
  });
}
javascriptgoogle-mapsgoogle-maps-markersimage-resizing
125
Golan_trevize

元のサイズが100 x 100で、50 x 50に拡大したい場合は、Sizeの代わりにscaledSizeを使用します。

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    Origin: new google.maps.Point(0,0), // Origin
    anchor: new google.maps.Point(0, 0) // anchor
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: icon
});
271
Catherine Nyo

コメントで述べたように、これはドキュメント付きのIconオブジェクトを優先して更新されたソリューションです。

使用 アイコンオブジェクト

var icon = {
    url: "../res/sit_marron.png", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    Origin: new google.maps.Point(0,0), // Origin
    anchor: new google.maps.Point(0, 0) // anchor
};

 posicion = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: posicion,
  map: map,
  icon: icon
 });
60
Philippe Boissonneault

MarkerImageはIconでは推奨されていません

Google Maps JavaScript APIのバージョン3.10までは、複雑なアイコンはMarkerImageオブジェクトとして定義されていました。 Iconオブジェクトリテラルは3.10で追加され、バージョン3.11以降のMarkerImageを置き換えます。アイコンオブジェクトリテラルはMarkerImageと同じパラメータをサポートします。コンストラクタを削除し、前のパラメータを{}にラップし、各パラメータの名前を追加することで、MarkerImageをIconに簡単に変換できます。

フィリップのコードは次のようになります。

 var icon = {
     url: "../res/sit_marron.png", // url
     scaledSize: new google.maps.Size(width, height), // size
     Origin: new google.maps.Point(0,0), // Origin
     anchor: new google.maps.Point(anchor_left, anchor_top) // anchor 
 };

 position = new google.maps.LatLng(latitud,longitud)
 marker = new google.maps.Marker({
  position: position,
  map: map,
  icon: icon
 });
13
Jono

原点を削除してアンカーを通常の写真にする

  var icon = {
        url: "image path", // url
        scaledSize: new google.maps.Size(50, 50), // size
    };

 marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, long),
  map: map,
  icon: icon
 });
3
ibrahimyanik

私のようなトピックの初心者にとっては、オンラインエディタやPhotoshopのようなフォトエディタを使用して画像のサイズを自分で変更するするよりも、これらの答えのいずれかを実装する方が難しい場合があります。

500×500の画像は50×50の画像よりも地図上で大きく表示されます。

プログラミングは不要です。

1
bearacuda13

だから私はちょうどこれと同じ問題を抱えていたが、少し違う。私はすでにPhilippe Boissonneaultが示すようにオブジェクトとしてアイコンを持っていましたが、私はSVG画像を使用していました。

私にとってそれを解決したのは、
SVG画像からPNGに切り替えて、Catherine Nyoに従って、使用するサイズの2倍のサイズの画像を作成します。

0
jumper