Question

当用户单击地图时，我正在使用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个条目，但是我不确定为什么会这样？

Answer 1

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

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

1 个答案: