点击侧边栏元素上的 Google 集群地图打开特定信息窗口答案

【问题标题】：Google Cluster map on click sidebar elements open particular info window点击侧边栏元素上的 Google 集群地图打开特定信息窗口
【发布时间】：2019-03-14 08:36:05
【问题描述】：

我试图在单击侧边栏元素时使用侧边栏实现集群谷歌地图，它需要在选择特定侧边栏元素时显示特定的信息窗口。我找到了一个教程，但它正在使用外部 API。但我想要实现的是获得自定义值。我正在添加我在此处添加的代码。

<html>
<head>
<script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBFLmEBCM9NFv4yDK6oXwDKX3FZjmvVqUk'></script>
<script type='text/javascript'  src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
</head>
<body>



    <div style="width:50%;float:left;">
    <div id="map"></div>
    <div style="width:50%; float:left;">
      <a href="#" onclick="myClick(0);">Hello 1</a>
      <a href="#" onclick="myClick(1);">Hello 2</a>
      <a href="#" onclick="myClick(2);">Hello 3</a>
      <a href="#" onclick="myClick(2);">Hello 4</a>

    </div>
    </div>
    <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {
          lat: 35.1264,
          lng: 33.4299
        }
      });
      var infoWin = new google.maps.InfoWindow();
      // Add some markers to the map.
      // Note: The code uses the JavaScript Array.prototype.map() method to
      // create an array of markers based on a given "locations" array.
      // The map() method here has nothing to do with the Google Maps API.
      var markers = locations.map(function(location, i) {
        var marker = new google.maps.Marker({
          position: location,
          icon:'https://www.tutorialspoint.com/google_maps/src/Picture1.png'
        });
        google.maps.event.addListener(marker, 'mouseover', function(evt) {
          infoWin.setContent(location.info);
          infoWin.open(map, marker);

        })
        return marker;
      });

      // markerCluster.setMarkers(markers);
      // Add a marker clusterer to manage the markers.
      var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
      });

    }
    var locations = [   
    {
    lat: 35.1218939381583,
    lng: 33.42075903167722,
    info: " Hello 1"
    },

    {
    lat: 35.11596152729056,
    lng: 33.42702467193601,
    info: " Hello 2"
    },

    {
    lat: 35.116312569544064,
    lng: 33.43535024871824,
    info: " Hello 3"
    },

    {
    lat: 35.11497860093425,
    lng: 33.430372068786596,
    info: " Hello 4"
    },
    ];
    google.maps.event.addDomListener(window, "load", initMap);



    //on click function
      function myClick(id) {
        google.maps.event.trigger(markers[id], 'click');
      }
    </script>
    <style>
    #map {
      height: 950px;
    }
    .map-img{float:left;}
    .map-title{width:100%; float:left;}
    </style> 

    </body>
    </html>

Google Cluster 工作正常，但单击时侧边栏元素没有弹出信息窗口。

【问题讨论】：

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

【解决方案1】：

“聚集”的标记不会添加到地图中。在您的 myClick 函数中，将它们添加到地图中或放大，以便聚类器“取消聚类”它们。

function myClick(id) {
  map.setCenter(markers[id].getPosition());
  map.setZoom(16);
  google.maps.event.trigger(markers[id], 'mouseover'); // to display InfoWindow
}

proof of concept fiddle

代码 sn-p：

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

#map {
  height: 100%;
  width: 50%;
  float: right;
}

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk'></script>
<script type='text/javascript' src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
<div style="width:100%;height:100%;">
  <div id="map"></div>
  <div style="width:50%; float:left;">
    <a href="#" onclick="myClick(0);">Hello 1</a><br>
    <a href="#" onclick="myClick(1);">Hello 2</a><br>
    <a href="#" onclick="myClick(2);">Hello 3</a><br>
    <a href="#" onclick="myClick(3);">Hello 4</a><br>

  </div>
</div>
<script>
  var markers;
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {
        lat: 35.1264,
        lng: 33.4299
      }
    });
    var infoWin = new google.maps.InfoWindow();
    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    markers = locations.map(function(location, i) {
      var marker = new google.maps.Marker({
        position: location,
        icon: 'https://www.tutorialspoint.com/google_maps/src/Picture1.png'
      });
      google.maps.event.addListener(marker, 'mouseover', function(evt) {
        infoWin.setContent(location.info);
        infoWin.open(map, marker);

      })
      return marker;
    });

    // markerCluster.setMarkers(markers);
    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers, {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
  }
  var locations = [{
      lat: 35.1218939381583,
      lng: 33.42075903167722,
      info: " Hello 1"
    },

    {
      lat: 35.11596152729056,
      lng: 33.42702467193601,
      info: " Hello 2"
    },

    {
      lat: 35.116312569544064,
      lng: 33.43535024871824,
      info: " Hello 3"
    },

    {
      lat: 35.11497860093425,
      lng: 33.430372068786596,
      info: " Hello 4"
    },
  ];
  google.maps.event.addDomListener(window, "load", initMap);



  //on click function
  function myClick(id) {
    map.setCenter(markers[id].getPosition());
    map.setZoom(16);
    google.maps.event.trigger(markers[id], 'mouseover');
  }
</script>

【讨论】：