Question

我正在尝试创建与不同视图对应的多个flyTo按钮，使用for循环运行所有视图，而不是为每个视图重复该功能。

我这样做是通过使用按钮名称填充列表，因此我可以将其调用到包含flyTo函数的for循环中。

在这个循环中出现问题，我得到错误“Uncaught TypeError：names [i] .addEventListener不是函数”。

我尝试过调用elements [i] .addEventListener ...但是后来得到一个错误“Uncaught TypeError：无法在HTMLButtonElement中读取未定义的属性'center'。”

当“center：views [i] .center”替换为“center：views [0] .center”或任何特定视图时，此错误将被删除 - 所有按钮都会飞到这一个视图。

我认为我有一切可以使它工作，但是方法不对，我正在努力解决它。我认为应该只有一个for循环，它创建一个按钮名称列表并将它们链接到视图。任何帮助将不胜感激 - 这是我的代码的链接：

<div id='map' class="myMap"></div>

<!-- View buttons -->
<div id='console'>
    <button class="location" name='loc 1' id='v1'>View 1</button>
    <button class="location" name='loc 2' id='v2'>View 2</button>
    <button class="location" name='loc 3' id='v3'>View 3</button>
</div>

<script>

// Mapboxgl demo app
'use strict';
var map;
mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuamFtaW4td3lzcyIsImEiOiJVcm5FdEw4In0.S8HRIEq8NqdtFVz2-BwQog';

// init the map
map = new mapboxgl.Map({
    container: 'map',
    style: 'https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v7.json',
    center: [-1.83, -78.183],
    zoom: 5.5,
});

var views = [{
              name: "View 1",
              zoom: 10,
              pitch: 0,
              bearing: 0,
              center: [-0.33,-78.49],
            },
            {
              name: "View 2",
              zoom: 10,
              pitch: 0,
              bearing: 0,
              center: [-1.04,-79.43],
            },
            {
              name: "View 3",
              zoom: 10,
              pitch: 0,
              bearing: 0,
              center: [-2.19,-78.11],
            },

          ];


 // Populate list with button names
  var elements = document.getElementsByClassName('location');
  var names = '';
    for(var i=0; i<elements.length; i++) {
     names += elements[i].name;
    }
  document.write(names);

  // For each button, fly to corresponding view
    for(var i=0; i<elements.length; i++) {
        names[i].addEventListener('click', function () {
        map.flyTo({
            center: views[i].center
            // zoom: app.views[i].zoom,
            // pitch: app.views[i].pitch,
            // bearing: app.views[i].bearing
        });
      });
   };
</script>

Answer 1

// Mapboxgl demo app
'use strict';

var map;

mapboxgl.accessToken = 'pk.eyJ1IjoiYmVuamFtaW4td3lzcyIsImEiOiJVcm5FdEw4In0.S8HRIEq8NqdtFVz2-BwQog';

// init the map
map = new mapboxgl.Map({
  container: 'map',
  style: 'https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v7.json',
  center: [-1.83, -78.183],
  zoom: 5.5,
});


// Populate list with button names
var elements = document.getElementsByClassName('location');
var names = '';
for (var i = 0; i < elements.length; i++) {
  names += elements[i].name;
  elements[i].addEventListener('click', function(event) {

    var zoom = parseInt(event.target.dataset.zoom);
    var pitch = parseInt(event.target.dataset.pitch);
    var bearing = parseInt(event.target.dataset.bearing);
    var lat = parseFloat(event.target.dataset.lat);
    var long = parseFloat(event.target.dataset.long);

    map.flyTo({
      center: [long, lat]
      // zoom: app.views[i].zoom,
      // pitch: app.views[i].pitch,
      // bearing: app.views[i].bearing
    });
  });
}
document.write(names);

html,
body {
  height: 100%;
}

#map {
  height: 61%;
  width: 100%;
}

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.css" rel="stylesheet" />

<div id='map' class="myMap"></div>

<!-- View buttons -->
<div id='console'>
  <button class="location" name='loc 1' id='v1' data-zoom="10" data-pitch="0" data-bearing="0" data-long="-0.33" data-lat="-78.49">View 1</button>
  <button class="location" name='loc 2' id='v2' data-zoom="10" data-pitch="0" data-bearing="0" data-long="-1.04" data-lat="-79.43">View 2</button>
  <button class="location" name='loc 3' id='v3' data-zoom="10" data-pitch="0" data-bearing="0" data-long="-2.19" data-lat="-78.11">View 3</button>
</div>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.0/mapbox-gl.js"></script>

Mapbox：为什么我的for循环调用不在flyTo函数的位置列表中？ “... addEventListener不是一个函数”

1 个答案: