Javascript 单击标记时更改标记图标（在单击事件上），并在单击其他标记时将其返回到正常图标
如何在单击标记（在单击事件上）时更改标记图标，并在单击其他标记时将其返回到正常图标 这是我的密码。在这段代码中，我为ATM和商店位置创建了两个图标Javascript 单击标记时更改标记图标（在单击事件上），并在单击其他标记时将其返回到正常图标,javascript,Javascript,如何在单击标记（在单击事件上）时更改标记图标，并在单击其他标记时将其返回到正常图标 这是我的密码。在这段代码中，我为ATM和商店位置创建了两个图标 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /
<!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.....
OpenStreetMap与谷歌地图v3API
html，body，#map{
位置：绝对位置；
左：100px；
高度：400px；
保证金：0；
填充：0；
宽度：400px；
}
变量映射；//映射变量
var mapOption；//用于显示地图的选项的变量
var cromaStorePos=新数组（23）；//Croma存储的坐标数组。
var cromaStoreCat=新阵列（3）；
var cromaMarker=新数组（23）；//Croma商店的标记数组。
//克罗玛商店的名单。硬编码。这些信息可以从Web服务接收。
cromaStoreAdd[0]=“钦奈纳纳加尔第二大道AA-5号卡纳大厦，邮编6000040。\n电话：044-6458 9703/04”；
cromaStorePos[0]=新的google.maps.LatLng（13.072121,80.261307）；
cromaStoreCat[0]=“ATM”；
cromaStoreAdd[1]=“钦奈乌斯曼北路拉姆克里希南街1号肯斯大厦一楼，邮编600017。\n电话：+91 044-64629816”；
cromaStorePos[1]=新的google.maps.LatLng（13.05473,80.235901）；
cromaStoreCat[1]=“商店”；
cromaStoreAdd[2]=“塔拉波尔大厦，金奈南纳撒莱826地下，邮编：600002。\n电话：+91 044-6458 9715/16”；
cromaStorePos[2]=新的google.maps.LatLng（13.094861,80.215645）；
cromaStoreCat[2]=“ATM”；
var元素=document.getElementById（“映射”）；
var mylatng=new google.maps.LatLng（13.072121,80.261307）；
/*
生成映射类型的列表。
您还可以使用var-mapTypeIds=[“路线图”、“卫星”、“混合”、“地形”、“OSM”]
但是，当谷歌更新默认地图类型列表时，静态列表很糟糕。
*/
var map=new google.maps.map（元素{
中心：myLatlng，
缩放：12，
disableDefaultUI:true，
泛控制：错误，
动物控制：错误，
scaleControl:false，
mapTypeId:google.maps.mapTypeId.ROADMAP，
街景控制：错误
});
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'；
//用于在croma中导航的For循环存储坐标和地址。
对于（i=0；i我不知道如何标记和取消标记它们。
为什么不直接循环并取消所有标记，然后只标记一个已单击的
尝试像这样使用jquery
或者像这样的简单循环