0
如何在单击标记（单击事件时）时更改标记图标和当另一个标记被点击时将它返回到正常图标？单击标记（单击事件）时更改标记图标，并在单击另一标记时将其恢复为正常图标
这是我的代码。在这段代码中，我为ATM和商店位置创建了两个图标。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>OpenStreetMap with Google Maps v3 API</title>
<style type="text/css">
html, body, #map {
position:absolute;
left:100px;
height: 400px;
margin: 0;
padding: 0;
width:400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map; // Variable for Map
var mapOption; // Variable for Options for showing Map
var cromaStorePos = new Array(23); // Array of coordinates of Croma Store.
var cromaStoreCat = new Array(3);
var cromaMarker = new Array(23); // Array of Markers for Croma Store.
// List of Croma stores. Hard coded. These informations can be recieved from webservices.
cromaStoreAdd[0] = "Khanna Building, AA-5, 2nd Avenue, \nAnnanagar, Chennai-6000040.\nPhone: 044-6458 9703/04";
cromaStorePos[0] = new google.maps.LatLng(13.072121,80.261307);
cromaStoreCat[0] = "ATM";
cromaStoreAdd[1] = "Ground Floor, KENCES Towers, No.1,\nRamakrishnan Street,\nNorth Usman Rd., Chennai-600017. \nPhone: +91 044 - 64629816";
cromaStorePos[1] = new google.maps.LatLng(13.05473,80.235901);
cromaStoreCat[1] = "store";
cromaStoreAdd[2] = "Tarapore Towers, 826 Ground Floor, \nAnna Salai, Chennai-600002. \nPhone: +91 044-6458 9715/16";
cromaStorePos[2] = new google.maps.LatLng(13.094861, 80.215645);
cromaStoreCat[2] = "ATM";
var element = document.getElementById("map");
var myLatlng = new google.maps.LatLng(13.072121,80.261307);
/*
Build list of map types.
You can also use var mapTypeIds = ["roadmap", "satellite", "hybrid", "terrain", "OSM"]
but static lists sucks when google updates the default list of map types.
*/
var map = new google.maps.Map(element, {
center: myLatlng,
zoom: 12,
disableDefaultUI: true,
panControl: false,
zoomControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
});
var cromaIcon = 'img/location_icon_atm_blue_blue.png';
var cromaIcon1 = 'img/location_icon_bank_blue_blue.png';
var cromaIcon2='img/pin_bank_Selected_blue.png';
var cromaIcon3='img/pin_atm_selected_blue.png';
// For loop for navigating through the croma stores coordinates and addresses.
for (i=0; i<3; i++)
{
if(cromaStoreCat[i]=="ATM")
{
cromaMarker[i] = new google.maps.Marker({
position: cromaStorePos[i],
map: map,
title: cromaStoreAdd[i],
icon: cromaIcon,
});
onclickMarker(cromaStoreCat[i],cromaMarker);
}
if(cromaStoreCat[i]=="store")
{
cromaMarker[i] = new google.maps.Marker({
position: cromaStorePos[i],
map: map,
title: cromaStoreAdd[i],
icon: cromaIcon1
});
onclickMarker(cromaStoreCat[i],cromaMarker);
}
}
function onclickMarker(category,marker){
google.maps.event.addListener(cromaMarker[i],"click",function(){
switch(category)
{
case 'ATM':
this.setIcon(cromaIcon3);
break;
case 'store':
this.setIcon(cromaIcon2);
break;
}
});
}
//---------------- End of Code for getting address of a particular coordinates. <position> here. ------------------//
//---------------- Code for handling the error -------------------//
function showError(err)
{
if (err.code == 0)
{
divMap.innerHTML = "Unknown error..";
}
else if (err.code == 1)
{
divMap.innerHTML = "User do not want to share its location.";
}
else if (err.code == 2)
{
divMap.innerHTML = "Sorry, But your position is not available.";
}
else if (err.code == 3)
{
divMap.innerHTML = "Sorry, But your request has timed out.";
}
}
</script>
</body>
</html>
Can anyone help me in this regard...
Thanks in advance.....
你的建议真的帮了我，并正在努力..多谢.... – Gopi 2012-08-17 09:44:20