Question

我已为Google Maps API编写代码，当我点击标记时，应显示多个标记，但也应显示已单击的标记。意味着页面不应该刷新。请帮我。这是我的代码，如果你点击标记会出现多个标记，但标记会消失。

<!DOCTYPE html>
<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: 25.2138, lng: 75.8648};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });

        var infowindow =  new google.maps.InfoWindow({
    content: 'Hello World!',
    map: map
});

marker.addListener('click', function() {
    clicktoOpenMAp();
});

marker.addListener('mouseover', function() {
    infowindow.open(map, this);
});


marker.addListener('mouseout', function() {
    infowindow.close();
});


      }




            function clicktoOpenMAp() { var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };


    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    map.setTilt(50);


    var markers = [
        ['chittorgarh', 24.8887, 74.6269],
        ['morak', 24.7265, 75.9739],
        ['mangrol', 25.3362, 76.5112]
    ];



    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });


        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        map.fitBounds(bounds);
    }


    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(8);
        google.maps.event.removeListener(boundsListener);
    });


      }




    </script>
<script
        src="https://maps.googleapis.com/maps/api/js?key='YourGoogleApiBecauseicantsharemine'&callback=initMap"></script>
  </body>
</html>

请使用您的Google API密钥，因为我无法与我分享。

Answer 1

好的，这就是我修复它的方法：

      function initMap() {
      var uluru = {
          lat: 25.2138,
          lng: 75.8648
      };
      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: uluru
      });
      var marker = new google.maps.Marker({
          position: uluru,
          map: map
      });

      var infowindow = new google.maps.InfoWindow({
          content: 'Hello World!',
          map: map
      });

      marker.addListener('click', function() {
          clicktoOpenMAp();
      });

      marker.addListener('mouseover', function() {
          infowindow.open(map, this);
      });


      marker.addListener('mouseout', function() {
          infowindow.close();
      });

      function clicktoOpenMAp() {
          //  var map;
          var bounds = new google.maps.LatLngBounds();
          var mapOptions = {
              mapTypeId: 'roadmap'
          };


          //  map = new google.maps.Map(document.getElementById("map"), mapOptions);
          map.mapTypeId = "roadmap";
          map.setTilt(50);


          var markers = [
              ['chittorgarh', 24.8887, 74.6269],
              ['morak', 24.7265, 75.9739],
              ['mangrol', 25.3362, 76.5112]
          ];



          for (i = 0; i < markers.length; i++) {
              var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
              bounds.extend(position);
              marker = new google.maps.Marker({
                  position: position,
                  map: map,
                  title: markers[i][0]
              });


              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                  return function() {
                      infoWindow.setContent(infoWindowContent[i][0]);
                      infoWindow.open(map, marker);
                  }
              })(marker, i));

              map.fitBounds(bounds);
          }


          var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
              this.setZoom(8);
              google.maps.event.removeListener(boundsListener);
          });


      }

  }

每次点击标记时你都在“创建”另一个地图（我对这条线进行了评论），然后你需要将函数clicktoOpenMap放在initmap中。

注意：我还在您调用api

的脚本中添加了异步延迟

<script
    src="https://maps.googleapis.com/maps/api/js?key='YourGoogleApiBecauseicantsharemine'&callback=initMap" async defer></script>

您可以使用

隐藏标记

markers[i].setMap(null);

并删除它们

var markers = [];

当我点击Google地图上的标记时，它应该会打开多个标记，但也会显示已单击的标记

1 个答案: