1

Google マップにカスタム マーカーを挿入していますが、マップ上で正確に指していません。主にマーカーの先端のデザインが原因だと思います。

カスタム マーカーの作成方法に関するガイドはありますか?

私は次のライブラリを使用しています: http://hpneo.github.com/gmaps/

ここに画像の説明を入力

// JavaScript Document
$(document).ready(function () {
    var map = new GMaps({
        div: '#map',
        lat: 13.00487,
        lng: 77.576729,
        zoom: 13,
    });

    map.addControl({
        position: 'top_right',
        text: 'Geolocate',
        style: {
            margin: '5px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            background: '#fff'
        },
        events: {
            click: function () {
                GMaps.geolocate({
                    success: function (position) {
                        map.setCenter(position.coords.latitude, position.coords.longitude);
                    },
                    error: function (error) {
                        alert('Geolocation failed: ' + error.message);
                    },
                    not_supported: function () {
                        alert("Your browser does not support geolocation");
                    }
                });
            }
        }
    });

    map.addMarker({
        lat: 13.00487,
        lng: 77.576729,
        title: 'Lima',
        icon: "http://i.imgur.com/3YJ8z.png",
        infoWindow: {
            content: '<p>HTML Content</p>'
        }
    });

});
4

3 に答える 3

9

おそらくあなたが望むのは次のようなものです：

var image = new google.maps.MarkerImage(
    'http://i.imgur.com/3YJ8z.png',
    new google.maps.Size(19,25),    // size of the image
    new google.maps.Point(0,0), // origin, in this case top-left corner
    new google.maps.Point(9, 25)    // anchor, i.e. the point half-way along the bottom of the image
);

map.addMarker({
    lat: 13.00487,
    lng: 77.576729,
    title: 'Lima',
    icon: image,
    infoWindow: {
        content: '<p>HTML Content</p>'
    }
});
于 2012-07-30T14:26:25.670 に答える
3

私が知る限り、Google マップ (API V3) 用のカスタム マーカーを作成するには 2 つの基本的な方法があります。1 つ目は「カスタム オーバーレイ」を使用する方法で、2 つ目は「複雑なアイコン」を使用する方法です。どちらも公式のGoogle Maps API ドキュメントで説明されています。あなたはできる..

1.) HTML を表示する場合は、 「カスタム オーバーレイ」を使用します。

Google マップ ドキュメントの例「カスタム オーバーレイ」は、Google マップ OverlayView クラスに基づいて独自の CustomMarker クラスを作成する方法を示しています。

CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
  ..
}
overlay = new CustomMarker(..)
overlay.setMap(map);

2.)画像を表示する場合は、 「複雑なアイコン」を使用します

Google マップ ドキュメントの例 " Complex Icons " は、複雑なアイコン、つまりアイコン、影の画像、および形状 (アイコンのクリック可能な領域を定義する形状) を使用して Google マーカーを作成する方法を示しています。

 var image = new google.maps.MarkerImage('images/flag.png', ..
 var shadow = new google.maps.MarkerImage('images/shadow.png', ..
 var marker = new google.maps.Marker({
    position: .., map: .., shadow: .., icon: image, shape: ..
   });
于 2013-01-03T14:18:28.467 に答える
1

https://developers.google.com/maps/documentation/javascript/overlays#Iconsに例があり、構文はhttps://developers.google.com/maps/documentation/javascript/reference#MarkerImageで説明されています

特に、カスタム マーカーが通常の Google マーカーとは形状が異なる場合、anchorパラメーターを正しく設定する必要があります。

編集後、

確かに小さな画像を使用しているように見えますが、すべてが通常サイズの Google マーカーとして扱われています。カスタム マーカーを作成する必要があります (上記参照)。

于 2012-07-30T14:25:59.370 に答える