Javascript - добавление 1 к переменной создает несколько записей console.log - PullRequest
Новая
       0

Javascript - добавление 1 к переменной создает несколько записей console.log

0 голосов
/ 13 ноября 2018

Я использую API Карт Google для захвата уровня масштабирования, когда пользователь нажимает на карту. Затем я хотел бы увеличить уровень масштабирования на 1, но у меня возникают проблемы с этим, и я получаю несколько записей console.log, когда запускаю это в браузере.

Вот сценарий, о котором идет речь: 

var map = null;

function initialize() {

  var myOptions = {
    zoom: 12,
    scaleControl: true,
    streetViewControl: false,
    center: new google.maps.LatLng(-28.8413400, 153.4384050),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"),
    myOptions);
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-28.8413400, 153.4384050),
    map: map,
    icon: 'https://maps.google.com/mapfiles/ms/icons/blue.png',
    title: ''
  });

  var point = new google.maps.LatLng(-27.7028557, 153.0120736);
  var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
  var marker = createMarker(point, '<p style="font-size:14px">Acme Services 2</p>', icon)

  var point = new google.maps.LatLng(-29.8089498, 152.8230076);
  var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
  var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)

  var point = new google.maps.LatLng(-26.6564235, 153.0586826);
  var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
  var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)



}
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(100, 20)
});

function createMarker(latlng, html, icon) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    icon: icon,
    map: map,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });


  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    console.log(zoomLevel);
  });
  google.maps.event.addListener(map, "click", function(event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    var newCentre = latitude + ', ' + longitude;
    var currentZoomLevel = map.getZoom();
    console.log("currentZoomLevel: " + currentZoomLevel);
    var zoomLevel = parseInt(currentZoomLevel, 10) + 1;
    console.log("zoomLevel: " + zoomLevel);
  });
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Markers</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.33&key=myKeyHere"></script>
  <style type="text/css">
    html,
    body,
    #map-canvas {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

</head>

<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map-canvas"></div>
</body>

</html>

Когда я просматриваю журнал консоли, я вижу несколько записей следующего содержания:

[Log] currentZoomLevel: 12 [Log] zoomLevel: 13

Похоже, он генерирует запись для каждого маркера, который у меня есть на карте. Например, если у меня 3 маркера, я получаю 6 записей в console.log, но я не уверен, почему это происходит?

1 Ответ

0 голосов
/ 13 ноября 2018

Просто переместите ваши map слушатели событий за пределы вашей createMarker функции.

Я также изменил:

  • объявил infowindow как глобальную переменную, чтобы он могбыть доступным в обеих функциях
  • объединил 2 слушателя события щелчка карты в один 

var map = null;
var infowindow;

function initialize() {

  var myOptions = {
    zoom: 12,
    scaleControl: true,
    streetViewControl: false,
    center: new google.maps.LatLng(-28.8413400, 153.4384050),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"),
    myOptions);

  infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(100, 20)
  });

  google.maps.event.addListener(map, 'click', function(event) {
    infowindow.close();

    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    var newCentre = latitude + ', ' + longitude;
    var currentZoomLevel = map.getZoom();
    console.log("currentZoomLevel: " + currentZoomLevel);
    var zoomLevel = parseInt(currentZoomLevel, 10) + 1;
    console.log("zoomLevel: " + zoomLevel);
  });

  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoomLevel = map.getZoom();
    console.log(zoomLevel);
  });

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-28.8413400, 153.4384050),
    map: map,
    icon: 'https://maps.google.com/mapfiles/ms/icons/blue.png',
    title: ''
  });

  var point = new google.maps.LatLng(-27.7028557, 153.0120736);
  var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
  var marker = createMarker(point, '<p style="font-size:14px">Acme Services 2</p>', icon)

  var point = new google.maps.LatLng(-29.8089498, 152.8230076);
  var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
  var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)

  var point = new google.maps.LatLng(-26.6564235, 153.0586826);
  var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
  var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)
}

function createMarker(latlng, html, icon) {

  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    icon: icon,
    map: map,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
}

initialize();
#map-canvas {
  height: 200px;
}
<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...