пропозиції роботи
konto usunięte
Temat: Różne kolory markera
Witam,mam taką animację mapki:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<link rel="stylesheet" type="text/css" href="include.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebCAR: Historia</title>
<style type="text/css">
v\:* { behavior:url(#default#VML); }
body { font-family: Verdana, Sans-serif; }
h3 { margin-left: 8px; }
#map { height: 500px;
width: 650px;
border: 1px solid gray;
margin-top: 8px;
margin-left: 8px;
overflow: hidden;
}
.button { display: block;
width: 110px;
border: 1px Solid #565;
margin: 10px;
padding: 3px;
text-decoration: none;
text-align:center;
font-size:smaller;
}
.button:hover {
background-color: white;
}
#descr { position:absolute;
top:45px;
left: 680px;
width: 250px;
}
.infowindow { font-size: smaller;
text-align: left;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjqCDB3PN5y4xZCzYbKHOhBQpLwa5onnIYg2J2E2sqWBzh_6noBQ8Rsofj2RkT1eS7bLHxuqJggBBTA" type="text/javascript">
</script>
</head>
<body onload="buildMap()" onunload="GUnload()">
<h3> </h3>
<div id="map"> </div>
<div id="descr">
<a href="#" class="button" onclick="haltAnim();return false;"><img src="http://www.eksiegarnia.net/autka/icon_stop_d.gif" border="0"></a>
<a href="#" class="button" onclick="carryOn();return false;"><img src="http://www.eksiegarnia.net/autka/icon_next.gif" border="0"></a>
<a href="#" class="button" onclick="playAgain();return false;"><img src="http://www.eksiegarnia.net/autka/icon_play.gif" border="0"></a>
</div>
<script type="text/javascript">
//<![CDATA[
// Global variables
var data = [
{ name: "Puttgarden, Fehmarn", date: "7. Dezember", lat:"54.503143", lng:"11.229228" },
{ name: "Rødbyhavn", date: "7. Dezember", lat:"54.653278", lng:"11.349048" },
{ name: "Maribo", date: "8. Dezember", lat:"54.773563", lng:"11.491527" },
{ name: "Sakskøbing", date: "9. Dezember", lat:"54.796132", lng:"11.633834" },
{ name: "Vordingborg", date: "10. Dezember", lat:"55.011685", lng:"11.914844" },
{ name: "Rønnede", date: "10. Dezember", lat:"55.260729", lng:"12.021961" },
{ name: "Køge", date: "10. Dezember", lat:"55.461728", lng:"12.178688" },
{ name: "Kopenhagen",date: "11. Dezember",lat:"55.68", lng:"12.569999" },
{ name: "Hørsholm", date: "13. Dezember", lat:"55.884939", lng:"12.502098" },
{ name: "Helsingør", date: "14. Dezember", lat:"56.034458", lng:"12.614192" },
{ name: "Helsingborg", date: "16. Dezember", lat:"56.049992", lng:"12.697448" },
{ name: "Örkelljunga", date: "17. Dezember", lat:"56.289489", lng:"13.279724" },
{ name: "Hässleholm", date: "18. Dezember", lat:"56.167346", lng:"13.767242" },
{ name: "Kristianstad", date: "19. Dezember", lat:"56.020069", lng:"14.151077" },
{ name: "Ystad", date: "20. Dezember", lat:"55.429013", lng:"13.823547" },
{ name: "Rønne, Bornholm", date: "21. Dezember", lat:"55.099784", lng:"14.690437" },
{ name: "Saßnitz, Rügen", date: "22. Dezember", lat:"54.487591", lng:"13.581848" }
];
var map, route;
var points = [];
var gmarkers = [];
var count =0;
var stopClick = false;
function addIcon(icon) { // Add icon attributes
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(32, 32);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(15, 34);
icon.infoWindowAnchor = new GPoint(19, 2);
icon.infoShadowAnchor = new GPoint(18, 25);
}
function addClickevent(marker) { // Add a click listener to the markers
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(marker.content);
});
return marker;
}
function buildMap() {
if(GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.53627304145948, 19.05029296875), 15);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
// Light blue marker icons
var icon = new GIcon();
icon.image = "http://www.google.com/intl/en_de/mapfiles/ms/icons/ltblue-dot.png";
addIcon(icon);
for(var i = 0; i < data.length; i++) {
points[i] = new GLatLng(parseFloat(data[i].lat), parseFloat(data[i].lng));
gmarkers[i] = new GMarker(points[i], icon);
// Store data attributes as property of gmarkers
var html ="<div class='infowindow'>" +
"<strong>"+ data[i].name + "<\/strong><p>" +
data[i].date + "<\/p><\/div>";
gmarkers[i].content = html;
addClickevent(gmarkers[i]);
map.addOverlay(gmarkers[i]);
}
// Draw polylines between marker points
var poly= new GPolyline(points, "#003355", 3, .5);
map.addOverlay(poly);
// Open infowindow of first marker
gmarkers[0].openInfoWindowHtml( gmarkers[0].content);
route =setTimeout("anim()", 4200);
}
}
function haltAnim() {
if(route) {
clearTimeout(route);
stopClick = true;
}
}
function carryOn() {
if(stopClick == true) anim();
stopClick = false;
}
function anim() {
count++;
if(count < points.length) {
map.panTo(points[count]);
gmarkers[count].openInfoWindowHtml( gmarkers[count].content);
var delay = 3400;
if((count+1) != points.length)
var dist = points[count].distanceFrom(points[count+1]);
// Adjust delay
if( dist < 10000 ) {
delay = 2000;
}
if( dist > 80000 ) {
delay = 4200;
}
route = setTimeout("anim()", delay);
}
else {
clearTimeout(route);
count = 0;
route = null;
}
}
function playAgain() {
GUnload();
if(route) clearTimeout(route);
stopClick = false;
count = 0;
buildMap();
}
//]]>
</script>
wszystko działa oki - chciałbym tylko żeby market przy którym jest animacja (który ma aktualnie wyświetloną "chmurkę" był np. czerwony - zamiast niebieskiego) - wiecie może jak to zrobic??
Opierałem się na tym przykładzie: http://wolfpil.googlepages.com/anim.html
Z góry dzięki za pomoc,
pozdrawiam Łukasz
