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

Question

我正在使用google map，我需要根据某些情况更改标记图标。我在地图的右侧添加了一个侧边栏，用于解释可以产生差异条件的情况。我对google map 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");
});

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

Answer 1

1. 创建一个数组来存储google.maps.Marker对象：

var gmarkers = [];

2. 用您创建的标记填充该数组：

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);

3. 向标记添加点击事件侦听器以更改其图标：

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

4. 添加代码以处理标记数组，并在jQuery click listener函数中单击它们：

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

proof of concept fiddle

代码段：

var gmarkers = [];

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"
      }
    });
    marker.addListener('click', function(e) {
      this.setIcon({
        url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
      })
    })
    gmarkers.push(marker);
  }

}

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

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

#map-canvas {
  height: 60%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-12 col-xs-12 map-site" style="height:100%; width: 100%;">
  <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="#">سلامت بارتی (make green)</a></li>
        <li><a href="#">شارژ باتری</a></li>
        <li><a href="#">شدت روشنایی</a></li>
      </ul>
    </div>
  </div>
  <div id="map-canvas"></div>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

Answer 2

喜欢这样

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

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