时间戳

首页 > 解决方案 > Javascript - 将 1 添加到变量会生成多个 console.log 条目

javascript - Javascript - 将 1 添加到变量会生成多个 console.log 条目

问题描述

当用户点击地图时，我正在使用 Google Maps API 来捕获缩放级别。然后我想将缩放级别增加 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>

当我查看控制台日志时，我可以看到以下多个条目：

[日志] currentZoomLevel：12 [日志] zoomLevel：13

看起来它正在为我在地图上的每个标记生成一个条目。例如，如果我有 3 个标记，我会在 console.log 中获得 6 个条目，但我不确定为什么会这样？

标签： javascriptgoogle-maps-api-3

解决方案

只需将您的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>

推荐阅读