184

Google Maps API を使用してマーカーでいっぱいの地図を作成していますが、1 つのマーカーを他のマーカーより目立たせたいと考えています。最も簡単な方法は、マーカーの色を赤ではなく青に変更することだと思います。これは簡単なことですか、それともまったく新しいアイコンを作成する必要がありますか? 新しいアイコンを作成する必要がある場合、最も簡単な方法は何ですか?

4

8 に答える 8

130

Google Maps APIのバージョン3では、これを行う最も簡単な方法は、BenjaminKeenがここで作成したようなカスタムアイコンセットを取得することです。

http://www.benjaminkeen.com/google-maps-coloured-markers/

これらのアイコンをすべてマップページと同じ場所に配置すると、マーカーを作成するときに適切なアイコンオプションを使用するだけで、マーカーに色を付けることができます。

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

これは非常に簡単で、現在取り組んでいるプロジェクトで使用しているアプローチです。

于 2011-08-24T17:48:27.233 に答える
65

ここに画像の説明を入力 ここに画像の説明を入力 マテリアル デザイン

2019年3月に編集され、プログラムによるピンの色が追加されました。

純粋なジャバスクリプト、画像なし、ラベルをサポート

非推奨の Charts API に依存しなくなりました

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });
于 2014-04-18T23:29:25.850 に答える
49

MapIconMaker: Google マップ v2 のライブラリ

1 つの方法は、MapIconMaker (デッドリンク) を使用することです。ここに例があります（デッドリンク）。Google マップのデフォルト アイコンは幅 20 ピクセル、高さ 34 ピクセルなので、次のようなものを使用してエミュレートできます。

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

いくつかの関数でラップして、物事をさらに簡単にすることもできます。

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

これは、私が作成するすべてのマーカーに個人的に使用するものです。気まぐれな色を変更するオプションがあることを好みます。

更新: デフォルト アイコンの 16 進数の色は「#FE7569」です。また、新しいアイコンで新しいマーカーを作成するのではなく、マーカーにイメージを設定することもできます。したがって、関数を強調表示したい場合は、上記の関数を使用して、次のようにすることができます。

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

StyledMarker: Google マップ v3 のライブラリ

V2 は少し前に V3 に置き換えられたので、この回答を更新する必要があると思いました。ここの V3 ユーティリティ ライブラリ (デッドリンク) にあるカスタム マーカー用のライブラリを作成しました。さまざまな色や形が可能で、マーカーにテキストを配置することもできます。これは、Google マップ タイプ マーカーを作成するためのメソッドを持つ Google Charts API を使用して機能します。Google Charts API を直接使用したい場合は、ソース コードを参照してください。

ただし、そのライブラリについては、これらのマーカー画像のクリック可能な領域を定義することを処理するため、たとえば、この例(デッドリンク) のように、テキストを含む長い吹き出しには、期待されるクリック可能な領域があります。

于 2010-03-18T20:22:25.410 に答える
47

マップ v2 は非推奨であるため、おそらく v3 マップに関心があるでしょう: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

v2 マップの場合:

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

1 つのロジック セットですべての「通常の」ピンを実行し、別のセットで定義された新しいマーカーを使用して「特別な」ピンを実行します。

于 2010-03-18T20:00:51.187 に答える
24

個人的には、Google Charts API によって生成されたアイコンは見栄えがよく、動的にカスタマイズしやすいと思います。

Google Maps API 3で私の回答を参照してください- デフォルト (ドット) マーカーのカスタム マーカーの色

于 2011-10-08T09:52:27.103 に答える
13

私が見つけた最も簡単な方法は、BitmapDescriptorFactory.defaultMarker() を使用することです。ドキュメントには、色を設定する例もあります。私自身のコードから：

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))
于 2014-03-09T06:25:15.143 に答える
2

マーカーをカスタマイズするには、次のオンライン ツールから実行できます: https://materialdesignicons.com/

あなたの場合、https : //materialdesignicons.com/icon/map-markerで入手でき、オンラインでカスタマイズできるマップマーカーが必要です。

デフォルトの赤を青に変更したいだけの場合は、次のアイコンを読み込むことができます: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

このスレッドで言及されています: https://stackoverflow.com/a/32651327/6381715

于 2018-04-17T13:03:06.203 に答える