Javascript 当用户单击某些链接时更改google地图标记图标

我正在使用谷歌地图，我需要根据某些条件更改标记图标。我在地图的右边添加了一个边栏，它解释了可以产生的差异条件。我对谷歌地图API和js完全陌生，所以我有点搞混了

这是我的页面的图片。我想在单击地图右侧栏上突出显示的

a

标记时，标记的颜色会变为绿色

以下是我的HTML代码：

<div class="col-sm-12 col-xs-12 map-site">
    <span>نقشه لامپ های پارک ملت</span>
    <div class="sidemap col-sm-3 col-xs-3">
        <button type="button" class="navbar-toggle1 try-op" > 
          <span class="icon-bar top-m"></span> 
          <span class="icon-bar mid-m"></span> 
          <span class="icon-bar bottom-m"></span> 
        </button>
        <div class="menumap"> <!-- <span class="btnClose">×</span> -->
          <ul>
            <li><a class="healthmap" id="healthmap" href="#">سلامت بارتی</a></li>
            <li><a href="#">شارژ باتری</a></li>
            <li><a href="#">شدت روشنایی</a></li>
          </ul>
        </div>
    </div>
    <div id="map-canvas"></div> 
</div>

نقشه لامپ های پارک ملت

以下是js代码：

function initialize() {
    var locations = [
  ['چراغ یک', 36.320153, 59.536075, 4],
  ['چراغ دو', 36.320014, 59.536612, 5],
  ['چراغ سه', 36.319859, 59.537212, 3],
  ['چراغ چهار', 36.320066, 59.538091, 2],
  ['چراغ پنج', 36.319513, 59.536440, 1]
];

  var mapOptions = {
    zoom: 17,
    center:  new google.maps.LatLng(36.320020, 59.537801),
    mapTypeId: 'satellite'
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);
for (i = 0; i < locations.length; i++) { 
  var image = 'image/marker.png';
  var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
  var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: {                             
        url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"                           }
    });
}

}

google.maps.event.addDomListener(window, 'load', initialize);

$('.healthmap').click(function() {  
    google.maps.event.trigger(gmarkers[i], "click");
});

函数初始化（）{
变量位置=[
['چراغ یک', 36.320153, 59.536075, 4],
['چراغ دو', 36.320014, 59.536612, 5],
['چراغ سه', 36.319859, 59.537212, 3],
['چراغ چهار', 36.320066, 59.538091, 2],
['چراغ پنج', 36.319513, 59.536440, 1]
];
变量映射选项={
缩放：17，
中心：新google.maps.LatLng（36.32002059.537801），
mapTypeId:'卫星'
}
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
对于（i=0；i

我已经试过了，但对我不起作用！有什么办法可以解决这个问题。

像这样

function changeMarkerImage(string pIcon){
 var Icon = {
        url: pIcon // marker Image URL
 };

    return new google.maps.Marker({
       icon: Icon
    });
}

创建一个数组来存储

google.maps.Marker

对象：

使用您创建的标记填充该阵列：

将单击事件侦听器添加到标记以更改其图标：

通过在jQuery click listener函数中单击标记数组添加要处理的代码：

نقشه لامپ های پارک ملت

我不明白。你能解释更多吗？可能重复的是，我在发布代码时遇到一个javascript错误：

Uncaught ReferenceError:gmarkers未定义

（该数组未定义，或未填充标记）。@geocodezip是的，未定义，但即使是我也定义了它，这个问题无法解决。您需要定义它并用标记填充它，然后遍历所有要更改的标记（即定义

i

）。@geocodezip您能解释一下吗？

var gmarkers = [];

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: {
    url: "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
  }
});
gmarkers.push(marker);

marker.addListener('click', function(e) {
  this.setIcon({
    url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
  })
});

$('.healthmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    google.maps.event.trigger(gmarkers[i], "click");
  }
});