Javascriptを使用してGoogleマップのマーカーの色を変更する方法を教えてください。私はこれに不慣れであり、助けていただければ幸いです。ありがとうございます。
次のコードを使用してマーカーを作成しました
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1],
locations[i][2]),
animation: google.maps.Animation.DROP,
map: map
});
Google Maps API v3では、マーカーアイコンを変更してみることができます。たとえば、緑色のアイコンを使用する場合：
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
またはマーカー初期化の一部として：
marker = new google.maps.Marker({
icon: 'http://...'
});
他の色：
等。
strokeColor次のプロパティを使用できます。
var marker = new google.maps.Marker({
id: "some-id",
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: "red",
scale: 3
},
map: map,
title: "some-title",
position: myLatlng
});
他の可能性については、このページを参照してください。
あなたはそれがうまくいくこのコードを使うことができます。
var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");
var marker = new google.maps.Marker({
position: yourlatlong,
icon: pinImage,
map: map
});
グーグルチャートAPIを使用して、その場でrgbコードを使用して任意の色を生成できます。
例：#ddd色のマーカー：
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd
上記のように含める
var marker = new google.maps.Marker({
position: marker,
title: 'Hello World',
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd'
});
マーカーアイコンを生成するためにGoogleまたは外部APIによって提供された限られたアイコンのセットに依存することを好まなかったことを除いて、私はBahadırYağanによって与えられた答えが本当に好きでした。最初の解決策は次のとおりです。
var marker = new google.maps.Marker({ id: "some-id", icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, strokeColor: "red", scale: 3 }, map: map, title: "some-title", position: myLatlng });
そして、これが私の改善された解決策です：
var marker = new google.maps.Marker({
position: myLatlng,
icon:{
path: 'm 12,2.4000002 c -2.7802903,0 -5.9650002,1.5099999 -5.9650002,5.8299998 0,1.74375 1.1549213,3.264465 2.3551945,4.025812 1.2002732,0.761348 2.4458987,0.763328 2.6273057,2.474813 L 12,24 12.9825,14.68 c 0.179732,-1.704939 1.425357,-1.665423 2.626049,-2.424188 C 16.809241,11.497047 17.965,9.94 17.965,8.23 17.965,3.9100001 14.78029,2.4000002 12,2.4000002 Z',
fillColor: '#00FF00',
fillOpacity: 1.0,
strokeColor: '#000000',
strokeWeight: 1,
scale: 2,
anchor: new google.maps.Point(12, 24),
},
});
特定のピンアイコンが欲しかったので、inkscapeでアイコンを作成し、SVGファイルを開いて、svgパスをコードのパスにコピーしましたが、これは、の「path」属性に入力したすべてのSVGパスで機能します。アイコンオブジェクト。
結果は次のとおりです。
1つのマップに4隻の船を設定するため、Google Developersの例を使用して、それをひねりました
https://developers.google.com/maps/documentation/javascript/examples/icon-complex
以下の関数で、さらに3つのカラーオプションを設定しました。
function setMarkers(map, locations) {
...
var image = {
url: 'img/bullet_amarelo.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(40, 40),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 40)
};
var image1 = {
url: 'img/bullet_azul.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(40, 40),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 40)
};
var image2 = {
url: 'img/bullet_vermelho.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(40, 40),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 40)
};
var image3 = {
url: 'img/bullet_verde.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(40, 40),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 40)
};
...
}
そして、以下のFORで、船ごとに1つの色を設定しました。
for (var i = 0; i < locations.length; i++) {
...
if (i==0) var imageV=image;
if (i==1) var imageV=image1;
if (i==2) var imageV=image2;
if (i==3) var imageV=image3;
...
# remember to change icon: image to icon: imageV
}
最終結果：
テキスト、テキストの色、塗りつぶしの色、アウトラインの色をすべて16進数のカラーコード（たとえば、赤の場合は＃FF0000）を使用して指定できるため、 GoogleChartsAPIを使用することをお勧めします。あなたはそれを次のように呼ぶことができます：
function getIcon(text, fillColor, textColor, outlineColor) {
if (!text) text = '•'; //generic map dot
var iconUrl = "http://chart.googleapis.com/chart?cht=d&chdp=mapsapi&chl=pin%27i\\%27[" + text + "%27-2%27f\\hv%27a\\]h\\]o\\" + fillColor + "%27fC\\" + textColor + "%27tC\\" + outlineColor + "%27eC\\Lauto%27f\\&ext=.png";
return iconUrl;
}
次に、マーカーを作成するときに、アイコンプロパティをそのように設定します。ここで、myColor変数は16進値（ハッシュ記号を除く）です。
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
animation: google.maps.Animation.DROP,
map: map,
icon: getIcon(null, myColor, myColor2, myColor3)
});
http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000テキストと塗りつぶしの色を設定するだけでよい場合は、解読が少し簡単なを代替URLとして使用できます。
khurramの回答は、GoogleChartsAPIにリダイレクトするサードパーティのサイトに関するものです。これは、その人がサーバーをダウンさせた場合、あなたは困惑していることを意味します。私は、Google APIが提供する柔軟性と、Googleに直接アクセスする信頼性を持っていることを好みます。各色に値を指定してください。指定しないと機能しません。
受け入れられた回答を拡張するために、次MarkerImagesのAPIを使用して任意の色のカスタムを作成できます。http://chart.googleapis.com
色の変更に加えて、これはマーカーの形状も変更しますが、これは望ましくない場合があります。
const marker = new window.google.maps.Marker(
position: markerPosition,
title: markerTitle,
map: map)
marker.addListener('click', () => marker.setIcon(changeIcon('00ff00'));)
const changeIcon = (newIconColor) => {
const newIcon = new window.google.maps.MarkerImage(
`http://chart.googleapis.com/chart?
chst=d_map_spin&chld=1.0|0|${newIconColor}|60|_|%E2%80%A2`,
new window.google.maps.Size(21, 34),
new window.google.maps.Point(0, 0),
new window.google.maps.Point(10, 34),
new window.google.maps.Size(21,34)
);
return newIcon
}
var map_marker = $（ "。map-marker"）。children（ "img"）。attr（ "src"）var pinImage = new google.maps.MarkerImage（map_marker）;
var marker = new google.maps.Marker({
position: uluru,
map: map,
icon: pinImage
});
}