1
Je travaille actuellement sur un projet qui consiste à tracer de nombreux marqueurs personnalisés sur une carte, puis à créer une page contextuelle lorsque l'utilisateur clique dessus. Ce problème que je suis, étant un débutant à javascript obtient une deuxième image de marqueur montrant sur la carte. Jusqu'à présent, j'ai le code suivant, comme vous le voyez, les icônes 'de la caméra Travaillons ... mais avoir besoin de la « Caltex » de travailler aussi ...:Google Maps APIv3 - comment superposer plusieurs marqueurs avec différentes images png
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-43.54654110763488, 172.6156002235225);
var myOptions = {
zoom: 11,
center: latlng,
navigationControl: false,
scaleable: false,
draggable:false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID,position: google.maps.ControlPosition.TOP_LEFT},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, webcams, caltex);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var webcams = [
['Anzac Dr ', -43.51129867148775, 172.7162349879427, 9],
['QEII', -43.48499827165804, 172.6179431987025, 8],
['Yaldhurst Russley', -43.52069820902269, 172.5344992587786, 7],
['Waimakariri Bridge', -43.47192540674842, 172.5693997383076, 6],
['Dyers Linwood', -43.54654110763488, 172.6956002235225, 4],
['Main North W', -43.4513336384715, 172.6278547889116, 5],
['Main North N', -43.4509480091774, 172.6386309983553, 3],
['Memorial Ave', -43.49318192393784, 172.5499633557023, 2],
['The Hub', -43.54341394837794, 172.5256827185488, 1]
];
/** Markers for caltex stations **/
var caltex = [
['Caltex VIC', -41.01785817829983, 174.91504669189453, 11], //Corner High & Brunswick Streets
['Caltex Porirua', -41.01785817829983, 174.91504669189453, 10], //Parumoana Street
['Caltex Railway Avenue', -41.01785817829983, 174.91504669189453, 9], //20 Railway Avenue
['Olympic Service Station', -41.23076651060946, 174.8100757598877, 8], //Corner Holland Crescent & Vogel Street
['Caltex Rimutaka', -41.2346071181492, 174.80685710906982, 7], //1193 Fergusson Drive North
['Caltex Wellington Airport', -41.243384802383986, 174.81380939483643, 6], //Corner Calabar Road & Broadway
['Caltex Wainuiomata', -41.29338219297847, 174.78076457977295, 4], //14-16 The Strand
['Caltex Upper Hutt', -41.301958541159564, 174.7844123840332, 5], //749-755 Fergusson Drive
['Caltex Stokes Valley', -41.286771831897774, 174.77312564849854, 3], //7 Stokes Valley Road, Stokes Valley
['Caltex Newtown', -41.285127199004215, 174.7728681564331, 2], //224 Riddiford Street
['Caltex Basin Reserve', -41.30211973991373, 174.7792625427246, 1] //28 Adelaide Road
];
function setMarkers(map, locations) {
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('camera.png',
// This marker is 32 pixels wide by 32 pixels tall.
new google.maps.Size(32, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 0));
var shadow = new google.maps.MarkerImage('camera_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var cameras = locations[i];
var myLatLng = new google.maps.LatLng(cameras[1], cameras[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: cameras[0],
zIndex: cameras[3]
});
}
for (var i = 0; i < locations.length; i++) {
var caltex = locations[i];
var myLatLng = new google.maps.LatLng(caltex[1], caltex[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: caltex[0],
zIndex: caltex[3]
});
}
}
var marker = newGMarker(LatLng,cameras)
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:450px; height:500px"></div>
</body>
</html>