Google Maps API v3 を使用して、マーカー アイコンをプログラムで変更するにはどうすればよいですか?
私がやりたいのは、誰かがリンクの上にカーソルを置いたときに、マップ上の対応するマーカー アイコンの色を変更して、問題のマーカーを示すことです。
基本的に、Roost と同じ機能です。
左側の住宅リストにカーソルを合わせると、右側の対応するマーカーの色が変わります
189733 次
5 に答える
185
電話してmarker.setIcon('newImage.png')ください...ドキュメントについては、こちらをご覧ください。
あなたはそれを行う実際の方法について尋ねていますか？each を作成し、アイコンを変更してマーカーに戻すリスナーを追加divするだけです。mouseovermouseout
于 2009-12-21T17:01:35.997 に答える
22
円をマーカー アイコンとして使用することもできます。次に例を示します。
var oMarker = new google.maps.Marker({
position: latLng,
sName: "Marker Name",
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 8.5,
fillColor: "#F00",
fillOpacity: 0.4,
strokeWeight: 0.4
},
});
次に、マーカーを動的に (マウスオーバーのように) 変更したい場合は、たとえば次のようにします。
oMarker.setIcon({
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
fillColor: "#00F",
fillOpacity: 0.8,
strokeWeight: 1
})
于 2014-10-02T08:44:14.407 に答える
8
このスレッドは死んでいるかもしれませんが、StyledMarkerは API v3 で利用できます。addDomListener()メソッドを使用して、必要な色の変更を正しい DOM イベントにバインドするだけです。この例は、あなたがやりたいことにかなり近いです。ページのソースを見ると、次のように変更します。
google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() {
styleIcon.set("color","#00ff00");
styleIcon.set("text","Go");
});
次のようなものに：
google.maps.event.addDomListener("mouseover",function() {
styleIcon.set("color","#00ff00");
styleIcon.set("text","Go");
});
それはあなたが先に進むのに十分なはずです.
DOM イベントに関するウィキペディアのページも、クライアント側でキャプチャしたいイベントをターゲットにするのに役立ちます。
頑張ってください（まだ必要な場合）
于 2011-11-12T00:29:39.743 に答える
5
GMaps Utility LibraryにはMapIconMakerというプラグインがあり、さまざまなマーカー スタイルをその場で簡単に生成できます。Google チャートを使用してマーカーを描画します。
ここには、それを使って作成できるマーカーの種類を示す良いデモがあります。
于 2009-12-21T17:50:15.480 に答える
4
このコードを試すことができます
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script>
function initialize()
{
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
var markers = [
['title-1', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.120850, '<p> Hello - 1 </p>'],
['title-2', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.420850, '<p> Hello - 2 </p>'],
['title-3', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.720850, '<p> Hello - 3 </p>'],
['title-4', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.020850, '<p> Hello - 4 </p>'],
['title-5', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.320850, '<p> Hello - 5 </p>']
];
var infoWindow = new google.maps.InfoWindow(), marker, i;
var testMarker = [];
var status = [];
for( i = 0; i < markers.length; i++ )
{
var title = markers[i][0];
var loan = markers[i][1];
var lat = markers[i][2];
var long = markers[i][3];
var add = markers[i][4];
var iconGreen = 'img/greenMarker.png'; //green marker
var iconRed = 'img/redMarker.png'; //red marker
var infoWindowContent = loan + "\n" + placeId + add;
var position = new google.maps.LatLng(lat, long);
bounds.extend(position);
marker = new google.maps.Marker({
map: map,
title: title,
position: position,
icon: iconGreen
});
testMarker[i] = marker;
status[i] = 1;
google.maps.event.addListener(marker, 'click', ( function toggleBounce( i,status,testMarker)
{
return function()
{
infoWindow.setContent(markers[i][1]+markers[i][4]);
if( status[i] === 1 )
{
testMarker[i].setIcon(iconRed);
status[i] = 0;
}
for( var k = 0; k < markers.length ; k++ )
{
if(k != i)
{
testMarker[k].setIcon(iconGreen);
status[i] = 1;
}
}
infoWindow.open(map, testMarker[i]);
}
})( i,status,testMarker));
map.fitBounds(bounds);
}
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event)
{
this.setZoom(8);
google.maps.event.removeListener(boundsListener);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="mapDiv" style="width:820px; height:300px"></div>
于 2015-04-21T11:49:29.003 に答える