web-dev-qa-db-ja.com

Google MapsAPI-マーカー画像のオフセット-マーカーの置換-GeoPositionではありません

特定の大都市圏を示す画像(円)があります。また、関連するすべての領域のGeoPositionがあります。

マーカーを配置すると、画像の中央下がマーカーのGeoPositionになります。しかし、それは空中写真なので、画像にオフセットを付けたいので、私のサークル画像のcenterはそのGeoPosition ..にあります。

これを達成する方法はありますか?

ありがとう!

15
Ron

LeJaredのおかげで私は解決策を見つけました。私の問題は、MarkerImageMarkerに置き換わると思ったことでした。ただし、最初に画像を定義し、後で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",
    });
21
Ron

Google APIバージョン3.11以降、 MarkerImageIcon に置き換えられました。マーカーを50pxに拡大縮小し、そのcenterがジオロケーション上にくるように配置する新しい方法は次のとおりです。

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
    });
10
Ilya Kogan

あなたはmarkerImageのアンカーポイントがどこにあるかを指定する必要があります。ドキュメントを参照してください: https://developers.google.com/maps/documentation/javascript/reference?hl=de#MarkerImage

指定されていない場合、googleはmarkerImageの下端の中心をアンカーポイントと見なします。

正しいmarkerImageを使用して複雑なマーカーを作成する方法のAPIドキュメントの例を次に示します。 https://google-developers.appspot.com/maps/documentation/javascript/examples/icon-complex?hl=de

3
LeJared

これが私の見解です。

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)
  }
});
0
Jens Törnell