Question

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

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

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

         }
     });
 }

请帮忙。

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

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

以下是代码段:(尝试全屏打开）

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>

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

1 个答案: