Карта Google: пользовательское наложенное изображение

Я использую OverlayView для создания простого наложения изображений на карты Google. Я хочу повторить изображение в разных местах на карте Google. Возможно ли это, и если да, то как я могу это сделать?

PS: Я использую код из документации веб-сайта Google Maps, но поскольку я новичок в кодировании, я не уверен, как это сделать.

Вот мой код

<!DOCTYPE html>
<html>

  <head>
    <meta name = "viewport" content = "initial-scale=1.0, user-scalable=no">
    <meta charset = "utf-8">
    <title>Google Cam</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>
    <script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>

      var overlay;
      USGSOverlay.prototype = new google.maps.OverlayView();

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: {
            lat: 62.323907,
            lng: -150.109291
          },
          gestureHandling: 'cooperative',
          zoomControl: false,
          scrollwheel: false,
          disableDoubleClickZoom: true,
          streetViewControl: false,
          panControl: false,
          mapTypeControl: false,
          mapTypeId: 'satellite'
        });

        var bounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(68.281819, -150.287132),
          new google.maps.LatLng(68.400471, -150.005608));

        var srcImage = 'https://developers.google.com/maps/documentation/' +
          'javascript/examples/full/images/talkeetna.png';

        overlay = new USGSOverlay(bounds, srcImage, map);
      }

      /** @constructor */
      function USGSOverlay(bounds, image, map) {

        this.bounds_ = bounds;
        this.image_ = image;
        this.map_ = map;
        this.div_ = null;

        // Explicitly call setMap on this overlay.
        this.setMap(map);
      }

      /**
       * onAdd is called when the map's panes are ready and the overlay has been
       * added to the map.
       */
      USGSOverlay.prototype.onAdd = function() {

        var div = document.createElement('div');
        div.style.borderStyle = 'none';
        div.style.borderWidth = '0px';
        div.style.position = 'absolute';

        // Create the img element and attach it to the div.
        var img = document.createElement('img');
        img.src = this.image_;
        img.style.width = '2000%';
        img.style.height = '2000%';
        img.style.position = 'absolute';
        div.appendChild(img);

        this.div_ = div;

        // Add the element to the "overlayLayer" pane.
        var panes = this.getPanes();
        panes.overlayLayer.appendChild(div);
      };

      USGSOverlay.prototype.draw = function() {


        var overlayProjection = this.getProjection();

        var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
        var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

        var div = this.div_;
        div.style.left = sw.x + 'px';
        div.style.top = ne.y + 'px';
        div.style.width = (ne.x - sw.x) + 'px';
        div.style.height = (sw.y - ne.y) + 'px';
      };

      USGSOverlay.prototype.onRemove = function() {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
      };

      google.maps.event.addDomListener(window, 'load', initMap);

    </script>
  </head>

  <body>
    <div id = "map"></div>
  </body>

</html>

javascript google-maps google-maps-api-3

05.12.2018 13:14

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

3 012

Ответы 1

Что вы можете. Все, что вам нужно изменить в своем коде, - это объявить 2 оверлея как переменные и 2 объекта LatLngBounds. Здесь я создал второй оверлей под тем, который вы используете в своем коде.

var overlay1;

// Declare a second overlay variable
var overlay2;

USGSOverlay.prototype = new google.maps.OverlayView();

function initMap() {

  // Initialize the map and the custom overlay.

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 66.323907,
      lng: -150.109291
    },
    gestureHandling: 'cooperative',
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    streetViewControl: false,
    panControl: false,
    mapTypeControl: false,
    mapTypeId: 'satellite'
  });

  var bounds1 = new google.maps.LatLngBounds(
    new google.maps.LatLng(68.281819, -150.287132),
    new google.maps.LatLng(68.400471, -150.005608));

  // Declared a second bounds object
  var bounds2 = new google.maps.LatLngBounds(
    new google.maps.LatLng(65.281819, -150.287132),
    new google.maps.LatLng(65.400471, -150.005608));

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'https://developers.google.com/maps/documentation/' +
    'javascript/examples/full/images/talkeetna.png';

  // The custom USGSOverlay object contains the USGS image,
  // the bounds of the image, and a reference to the map.
  overlay1 = new USGSOverlay(bounds1, srcImage, map);

  // Create a second overlay
  overlay2 = new USGSOverlay(bounds2, srcImage, map);
}

/** @constructor */
function USGSOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '2000%';
  img.style.height = '2000%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};

// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};


initMap();

#map {
  height: 200px;
}

<div id = "map"></div>

<script src = "https://maps.googleapis.com/maps/api/js"></script>

Я переименовал ваши исходные переменные в overlay1 и bounds1 для ясности, но вы можете использовать любые имена переменных, какие захотите.

Большое спасибо, MrUpsidown. К сожалению, это не работает. Не знаю почему, сейчас он ничего не показывает, просто пустая страница.

— 06.12.2018 13:05

Это работает ... Нажмите синюю кнопку «Выполнить фрагмент кода» выше, и вы увидите, что он работает ...

— 06.12.2018 14:20

Хммм ... да, фрагмент работает. Но когда я копирую код, и он не работает, я редактирую только те части, которые вы добавили (2 наложения), и все равно не работает. Я также заметил, что части: <script src = "maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> </…> больше нет.

— 06.12.2018 15:43

Та часть, которую вы упомянули, есть в HTML. Вы, должно быть, делаете что-то не так. Следите за своей консолью JS и убедитесь, что вы копируете / вставляете правильный код в нужное место. Если это ответило на ваш вопрос, отметьте его как принятый.

— 06.12.2018 15:48

05.12.2018 17:23