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

Posted 2023-03-28

【中文标题】当用户单击某些链接时更改谷歌地图标记图标

【英文标题】：Change google maps marker icon when some link clicked by user

【发布时间】：2020-02-01 16:34:37

【问题描述】：

我正在使用谷歌地图，我需要根据某些情况更改标记图标。我在地图的右侧添加了一个侧边栏，它解释了可以累积的差异条件。我对谷歌地图 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，但它对我不起作用！有什么办法可以解决这个问题。

【问题讨论】：

Change color of google maps v3 marker on mouseover of element out side of map的可能重复

我在发布的代码中收到了一个 javascript 错误：Uncaught ReferenceError: gmarkers is not defined（该数组未定义，或未填充标记）。

@geocodezip 是的，它没有定义，但即使我定义了它，问题也没有解决。

您需要定义它并使用标记填充它，然后遍历您要更改的所有标记（即定义i）。

@geocodezip 你能详细解释一下吗？

【参考方案1】：

创建一个数组来存储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

代码 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 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>

【参考方案2】：

喜欢这个

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

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

【讨论】：

我不明白。你能解释更多吗？