Question

我在谷歌地图动态地图中的标记上实现地址可视化时遇到问题。

我的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: {lat: 44.0, lng: 12.0}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = '';

        // 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) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });
        // 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: 44.5153, lng: 11.3428},
{lat: 44.4926, lng: 11.3657},
{lat: 44.4948, lng: 11.3158}
//input geocode continue
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=initMap">
    </script>
  </body>
</html>

我想在每个标记上添加点击弹出信息，但我无法做到，我搜索了很多，但我找不到任何可行的解决方案。

有人可以帮助我吗？

Answer 1

我已经编辑了你的代码，让它可以使用信息窗口

之前，初始化标记添加这行代码

 var infoWin = new google.maps.InfoWindow();

这将初始化信息窗口，现在将标记初始化修改为

   var markers = locations.map(function(location, i) {
            var marker = new google.maps.Marker({
                position: location,
                label: labels[i % labels.length]
            });

            //// here we are adding the event listner for the markers to open the info window on click
            google.maps.event.addListener(marker, 'click', function(evt) {
                infoWin.setContent(location.info);
                infoWin.open(map, marker);
            })
            return marker;
        });

注意我们正在从位置数组中读取信息，因此更改您的位置数组以包含第三个参数“info”，如下所示

  var locations = [{
            lat: 44.5153,
            lng: 11.3428,
            info: 'place 1'
        }, {
            lat: 44.4926,
            lng: 11.3657,
            info: 'place2'
        }, {
            lat: 44.4948,
            lng: 11.3158,
            info: 'place 3'
        }
        //input geocode continue
    ]

希望这会有所帮助，它会与我一起工作，请在我编辑我的答案后删除投票

在谷歌地图地址中添加关于地址的信息

1 个答案: