不同外部链接的谷歌地图标记点击功能问题

Question

我正在为我的网站使用谷歌地图。单击地图的右侧菜单时，我想显示不同的颜色。每个链接都有自己的标记颜色。如果单击第一个链接，标记必须为绿色，如果单击第二个颜色，则标记必须为红色并继续。但是在代码中，我在单击每个链接后编写，标记会变成红色，这是我分配的最后一种颜色。我认为标记“点击”功能应该是每个链接的不同功能。我已经尝试了很多示例，但我无法使其工作。

这是照片：

这里是 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">سلامت بارتی</a></li>
                <li><a class="chargemap" id="chargemap">شارژ باتری</a></li>
                <li><a class="saturationmap" id="saturationmap">شدت روشنایی</a></li>
              </ul>
            </div>
        </div>
        <div id="map-canvas"></div>     
</div>

JS代码：

var gmarkers = [];
var pmarkers = [];
var rmarkers = [];

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


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


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

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

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

谁能帮我解决这个问题？我认为这是因为 click 功能不同和 marker.addListener('click') 不同而发生的，但我无法解决此问题。

here是js小提琴链接。

Answer 1

要更改所有标记并具有不同的颜色，请更改外部onclick 函数中的图标。

$('.healthmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
    });
  }
});

$('.chargemap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
    });
  }
});

$('.saturationmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
    })
  }
});

proof of concept fiddle

代码 sn-p：

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 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"
      }
    });
    gmarkers.push(marker);
  }
}

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

$('.healthmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
    });
  }
});

$('.chargemap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
    });
  }
});

$('.saturationmap').click(function() {
  for (var i = 0; i < gmarkers.length; i++) {
    gmarkers[i].setIcon({
      url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png"
    })
  }
});

#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">سلامت بارتی(make green)</a></li>
        <li><a class="chargemap" id="chargemap">شارژ باتری(make blue)</a></li>
        <li><a class="saturationmap" id="saturationmap">شدت روشنایی(make red)</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>