当某些 link 被用户点击时更改 google 地图标记图标

Question

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

我已经尝试 this answer 但它对我不起作用！有什么办法可以解决这个问题吗？

Answer 1

像这样

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

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

Answer 2

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

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

添加代码以通过在 jQuery 点击侦听器函数中点击它们的标记数组进行处理：

$('.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>

当某些 link 被用户点击时更改 google 地图标记图标

Change google maps marker icon when some link clicked by user

javascript

jquery

google-maps

google-maps-markers