Question

我遇到了将longitute和latitute转换为数组的问题，我的代码是这样的：

<div id="right" class="map">

  <div id='map' class="map" style='width: 100%; height: 100%; margin: 0px;'></div>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibGl2ZS1vbGRoYW0iLCJhIjoiY2ozbXk5ZDJ4MDAwYjMybzFsdnZwNXlmbyJ9.VGDuuC92nvPbJo-qvhryQg';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v10',
      center: [-1.77, 52.73],
      zoom: 3

    });
    map.addControl(new MapboxGeocoder({
      accessToken: mapboxgl.accessToken
    }));
    map.on('click', function(e) {
      var test = JSON.stringify(e.lngLat);
      test.toArray();
      console.log(test);
      mapboxgl.Marker()
        .setLngLat(test)
        .addTo(map);
    });

测试返回值为：

{"lng":-2.8246875000017155,"lat":52.72999999999914}

但是，值必须为：

[-2.8246875000017155, 52.72999999999914]

所以toArray应该可以工作但我得到了

未捕获的TypeError：test.toArray不是函数
       在e。（1：181）
       在e.Evented.fire（evented.js：87）
       在h（bind_handlers.js：139）
       在HTMLDivElement.s（bind_handlers.js：114）

修改

map.on('click', function(e) {
  var test = e.lngLat;
  console.log(test);
  test.toArray();
  mapboxgl.Marker()
    .setLngLat(test)
    .addTo(map);
});

但现在我明白了：

未捕获的TypeError：无法读取属性＆＃39; bind＆＃39;未定义的

Answer 1

问题是您必须创建新标记。如果您按照documentation中的代码进行操作，则应该有效。

对您的代码进行以下修改

map.on('click', function (e) {
    new mapboxgl.Marker()
        .setLngLat(e.lngLat)
        .addTo(map);
});

修改

没有什么会作为标记出现，你必须自己设计样式，我想知道，尝试添加这个CSS来看看。

.mapboxgl-marker { width: 10px; height: 10px; background-color: purple; }

Answer 2

您可以尝试以下方法：

var longLatArray = [];
longLatArray.push(e.lng);
longLatArray.push(e.lat);
mapboxgl.Marker()
    .setLngLat(longLatArray)
    .addTo(map);

.toArray（）;不是一个功能

2 个答案: