这里我通过迭代数组并从数组中获取latlon值来放置标记。但在这里我使用单个地图标记图标来绘制所有坐标。但我想要做的是，我在目录中有6个不同的标记图标。我想随机使用那些不同的标记来绘制坐标。我怎么能这样做？
这里我只使用一个gif标记
var marker_image = 'images/pushpins/pin.gif';
但我想随机使用下面的标记图像 pin-1.gif，pin-2.gif，pin-3.gif ....等等，直到pin-6.gif。即6个标记图像。
代码：
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
var markers = [];
var map;
var india = new google.maps.LatLng(23.200961, 87.436816);
var marker_image = 'images/pushpins/pin.gif';
function initialize() {
var mapOptions = {
zoom: 5,
disableDefaultUI: true,
center: india
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var swBound = new google.maps.LatLng(0.615223, 66.368164);
var neBound = new google.maps.LatLng(43.130821, 108.710449);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'images/overlay.png';
overlay = new USGSOverlay(bounds, srcImage, map);
drop(3000);
setTimeout(function() {
clearMarkers();
// initialize();
}, 16000);
}
function drop() {
clearMarkers();
for (var i = 0; i < locations.length; i++) {
var city = locations[i][0];
var pro_cat = locations[i][1];
var product_image = locations[i][3];
addMarkerWithTimeout(locations[i][2], i * 500);
//alert("dropped");
getCity(city,pro_cat, i * 500);
if(product_image == null)
{
//if image found in row-do nothing
}
else {
//if image found
showdiv(city,product_image, i * 500);
/*window.setTimeout(function() {
hidediv();
},2500);*/
}
}
}
function showdiv(city, imagesrc, timeout)
{
window.setTimeout(function() {
document.getElementById('city-order').innerHTML = "";
document.getElementById('order-product').innerHTML = "";
document.getElementById('product-list-display').style.display = "block";
var order_placed_city = document.getElementById('city-order');
var content = document.createTextNode(city);
order_placed_city.appendChild(content);
var product_order = document.getElementById('order-product');
var elem = document.createElement("img");
product_order.appendChild(elem);
elem.src = imagesrc;
},timeout);
/*window.setTimeout(function() {
hidediv();
},2500);*/
}
function hidediv(){
document.getElementById('product-list-display').style.display = "none";
}
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
// [END region_constructor]
// [START region_attachment]
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// [END region_attachment]
// [START region_drawing]
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
// [END region_drawing]
// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
// [END region_removal]
function getCity(city_name, product_cat, timeout){
window.setTimeout(function() {
var writecity = document.createTextNode(city_name+', '+product_cat);
document.getElementById("order_list").appendChild(writecity);
document.getElementById("order_list").appendChild(document.createElement('br'));
}, timeout);
}
google.maps.event.addDomListener(window, 'load', initialize);
答案 0 :(得分：1)
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
var markers = [];
var map;
var india = new google.maps.LatLng(23.200961, 87.436816);
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
//Invocation:
var rnd = randomFromTo(1,7);
if(rnd==1)
var marker_image = 'images/pushpins/pin.gif';
else if(rnd==2)
var marker_image = 'images/pushpins/pin2.gif';
else if(rnd==3)
var marker_image = 'images/pushpins/pin3.gif';
else if(rnd==4)
var marker_image = 'images/pushpins/pin4.gif';
else if(rnd==5)
var marker_image = 'images/pushpins/pin5.gif';
else if(rnd==6)
var marker_image = 'images/pushpins/pin6.gif';
else if(rnd==7)
var marker_image = 'images/pushpins/pin7.gif';
function initialize() {
var mapOptions = {
zoom: 5,
disableDefaultUI: true,
center: india
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var swBound = new google.maps.LatLng(0.615223, 66.368164);
var neBound = new google.maps.LatLng(43.130821, 108.710449);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = 'images/overlay.png';
overlay = new USGSOverlay(bounds, srcImage, map);
drop(3000);
setTimeout(function() {
clearMarkers();
// initialize();
}, 16000);
}
function drop() {
clearMarkers();
for (var i = 0; i < locations.length; i++) {
var city = locations[i][0];
var pro_cat = locations[i][1];
var product_image = locations[i][3];
addMarkerWithTimeout(locations[i][2], i * 500);
//alert("dropped");
getCity(city,pro_cat, i * 500);
if(product_image == null)
{
//if image found in row-do nothing
}
else {
//if image found
showdiv(city,product_image, i * 500);
/*window.setTimeout(function() {
hidediv();
},2500);*/
}
}
}
function showdiv(city, imagesrc, timeout)
{
window.setTimeout(function() {
document.getElementById('city-order').innerHTML = "";
document.getElementById('order-product').innerHTML = "";
document.getElementById('product-list-display').style.display = "block";
var order_placed_city = document.getElementById('city-order');
var content = document.createTextNode(city);
order_placed_city.appendChild(content);
var product_order = document.getElementById('order-product');
var elem = document.createElement("img");
product_order.appendChild(elem);
elem.src = imagesrc;
},timeout);
/*window.setTimeout(function() {
hidediv();
},2500);*/
}
function hidediv(){
document.getElementById('product-list-display').style.display = "none";
}
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
// [END region_constructor]
// [START region_attachment]
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// [END region_attachment]
// [START region_drawing]
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
// [END region_drawing]
// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
// [END region_removal]
function stopAnimatingProducts(){
//Stop all my animations now
}
function addMarkerWithTimeout(position, timeout) {
window.setTimeout(function() {
markers.push(new google.maps.Marker({
position: position,
map: map,
icon: marker_image,
optimized: false,
//animation: google.maps.Animation.BOUNCE
}));
}, timeout);
//alert("hello");
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
document.getElementById('order_list').innerHTML = "";
document.getElementById('product-list-display').style.display = "none";
}
function getCity(city_name, product_cat, timeout){
window.setTimeout(function() {
var writecity = document.createTextNode(city_name+', '+product_cat);
document.getElementById("order_list").appendChild(writecity);
document.getElementById("order_list").appendChild(document.createElement('br'));
}, timeout);
}
google.maps.event.addDomListener(window, 'load', initialize);`