Question

这是我的谷歌地图代码，我只是阅读了观看的教程来弄清楚它并且不知道编码。一切正常，但是当我测试它时，地图不会居中。我漂浮在海洋上，不得不拖动岛的尖端看我的泡泡/标记。提前感谢您的耐心和帮助。

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Creating a Custom Popup</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;
      }
      /* The location pointed to by the popup tip. */

      .popup-tip-anchor {
        height: 0;
        position: absolute;
        /* The max width of the info window. */
        width: 200px;
      }
      /* The bubble is anchored above the tip. */

      .popup-bubble-anchor {
        position: absolute;
        width: 100%;
        bottom: /* TIP_HEIGHT= */
        8px;
        left: 0;
      }
      /* Draw the tip. */

      .popup-bubble-anchor::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        /* Center the tip horizontally. */
        transform: translate(-50%, 0);
        /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
        width: 0;
        height: 0;
        /* The tip is 8px high, and 12px wide. */
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: /* TIP_HEIGHT= */
        8px solid skyblue;
      }
      /* The popup bubble itself. */

      .popup-bubble-content {
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-50%, -100%);
        /* Style the info window. */
        background-color: skyblue;
        padding: 5px;
        border-radius: 5px;
        font-family: sans-serif;
        overflow-y: auto;
        max-height: 60px;
        box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
      }

    </style>
  </head>

  <body>
    <div id="map"></div>
    <div id="content">
      Paddle Core Fitness!
    </div>
    <script>
      var map, popup, Popup;

      /** Initializes the map and the custom popup. */
      function initMap() {
        definePopupClass();

        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 21.9, lng: -157.8
          },
          zoom: 10,
        });

        popup = new Popup(
          new google.maps.LatLng(21.286891, -157.846388),
          document.getElementById('content'));
        popup.setMap(map);
      }

      /** Defines the Popup class. */
      function definePopupClass() {
        /**
         * A customized popup on the map.
         * * @param {!google.maps.LatLng}position
         * @param {!Element} content
         * @constructor
         * @extends {google.maps.OverlayView}
         */
        Popup = function(position, content) {
          this.position = position;

          content.classList.add('popup-bubble-content');

          var pixelOffset = document.createElement('div');
          pixelOffset.classList.add('popup-bubble-anchor');
          pixelOffset.appendChild(content);

          this.anchor = document.createElement('div');
          this.anchor.classList.add('popup-tip-anchor');
          this.anchor.appendChild(pixelOffset);

          // Optionally stop clicks, etc., from bubbling up to the map.
          this.stopEventPropagation();
        };
        // NOTE: google.maps.OverlayView is only defined once the Maps API has
        // loaded. That is why Popup is defined inside initMap().
        Popup.prototype = Object.create(google.maps.OverlayView.prototype);

        /** Called when the popup is added to the map. */
        Popup.prototype.onAdd = function() {
          this.getPanes().floatPane.appendChild(this.anchor);
        };

        /** Called when the popup is removed from the map. */
        Popup.prototype.onRemove = function() {
          if (this.anchor.parentElement) {
            this.anchor.parentElement.removeChild(this.anchor);
          }
        };

        /** Called when the popup needs to draw itself. */
        Popup.prototype.draw = function() {
          var divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
          // Hide the popup when it is far out of view.
          var display =
            Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000 ?
            'block' :
            'none';

          if (display === 'block') {
            this.anchor.style.left = divPosition.x + 'px';
            this.anchor.style.top = divPosition.y + 'px';
          }
          if (this.anchor.style.display !== display) {
            this.anchor.style.display = display;
          }
        };

        /** Stops clicks/drags from bubbling up to the map. */
        Popup.prototype.stopEventPropagation = function() {
          var anchor = this.anchor;
          anchor.style.cursor = 'auto';

          ['click', 'dblclick', 'contextmenu', 'wheel', 'mousedown', 'touchstart',
            'pointerdown'
          ]
          .forEach(function(event) {
            anchor.addEventListener(event, function(e) {
              e.stopPropagation();
            });
          });
        };
      }

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


    </script>
  </body>

</html>

Answer 1

尝试通过设置与弹出窗口相同的经度和纬度来设置更精确的地图中心。

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 21.286891, lng: -157.846388 },
  zoom: 10,
  });

地图偏离中心：我必须将其拖动才能看到我的标记

1 个答案: