单击汉堡菜单中的列表项时如何在谷歌地图上显示标记答案

【问题标题】：How to show marker on google map when clicked on list item from hamburger menu单击汉堡菜单中的列表项时如何在谷歌地图上显示标记
【发布时间】：2017-12-02 11:31:44
【问题描述】：

我正在研究谷歌地图。我想将标记链接到菜单中的项目。如果我单击名称，它应该只显示相应的标记。但我的代码只指向地图中的最后一个标记。

我所有的链接都指向最后一个标记。请帮我解决这个问题。

<div class="menu">
     <div data-bind="foreach: visible">
        <p class="clicked" data-bind="text: location, click"></p>
     </div>
</div>

javaScript：

var bounds = new google.maps.LatLngBounds();

for (var i = 0; i < markersData.length; i++) {

    var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
    var loc = markersData[i].locationId;
    var name = markersData[i].location;

    $('.clicked').on('click', function() {

        if ($('.clicked').location = name) {
            console.log(location);
            createMarker(latlng, loc);

        }
    });

我更改了代码，但这个代码在单击单个链接时一次显示所有标记。

function displayMarkers() {

     var bounds = new google.maps.LatLngBounds();

     for (var i = 0; i < markersData.length; i++) {

     var latlng = new google.maps.LatLng(markersData[i].lat,markersData[i].lng);
         var loc = markersData[i].locationId;
         var name = markersData[i].location;

         checkLinkClicked(latlng, loc, name);
         createMarker(latlng, loc);

         bounds.extend(latlng);
     }

     map.fitBounds(bounds);
 }

 function checkLinkClicked(latlng, loc, name) {

     $(’.clicked’).on(‘click’, function() {

         if ((’.clicked’).location = name) {
             createMarker(latlng, loc);

         }
     });
 }

请帮忙。

【问题讨论】：

嗨 Aaqib...感谢格式化。
stackoverflow.com/questions/30439915/…的可能重复
stackoverflow.com/questions/32351008/…的可能重复
您的fiddle 不起作用。
我编辑了这个问题。我解决了相关问题，但无法将其应用于我的代码。

标签： javascript google-maps-api-3 google-maps-markers

【解决方案1】：

请检查此工作示例。 http://jsbin.com/tayope/edit?html,js,output

这只是一个演示您需要的功能的基本演示。忽略布局/设计。

这是菜单中带有 onClick 事件的示例项目：

<li><a href="#" onClick="showMarker(1)">Marker 1</a></li>

当用户点击菜单中的某个项目时，它基本上会在地图中显示特定的标记。

function showMarker(index) {
  hideAllMarkers();
  markers[index - 1].setMap(map);
}

您可以传递索引或将其添加为菜单项的数据属性。

这里也是sn-p的代码：（尝试全屏打开）

var map;
var coordinates = [
  {
    lat: 14.534472,
    lng: 121.052367 
  },
  {
    lat: 14.532709,
    lng: 121.05333 
  },
  {
    lat: 14.533593,
    lng: 121.053128 
  }
]
var markers = []

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 14.533593, lng: 121.053128},
    zoom: 15,
  });
  
  for(var i = 0; i < coordinates.length; i++) {
      var marker = new google.maps.Marker({
        position: coordinates[i],
        map: map
      });
      marker.setMap(null);
      markers.push(marker);
  }
}

function showMarker(index) {
  hideAllMarkers();
  markers[index - 1].setMap(map);
}

function hideAllMarkers() {
  for(var i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
  }
}

#map {
    height: 500px !important;
		margin: auto;
    background: gray;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Markers</title>
  </head>
  <body>
    <div>
      <h3>Menu</h3>
      <ul>
        <li><a href="#" onClick="showMarker(1)">Marker 1</a></li>
        <li><a href="#" onClick="showMarker(2)">Marker 2</a></li>
        <li><a href="#" onClick="showMarker(3)">Marker 3</a></li>
      </ul>
    </div>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8" async defer></script>
  </body>
</html>

【讨论】：