javascript - setLngLat().setPopup 不是函数

Question

一旦 View 渲染，我就会收到此错误，并且不会添加弹出窗口 -

mapbox-gl.js:176 TypeError: (intermediate value).setLngLat(...).setPopup is not a function(…)

有人遇到过这个问题或者知道解决这个问题的方法吗？

代码是在标记上设置弹出窗口，我已点击此链接 https://www.mapbox.com/mapbox-gl-js/example/set-popup/

  let tpl;
  if (vendor.get('cachedAverageRating')) {
    tpl = `
    <div class='ui map-marker'>
      <div class="photo">
        <img src="${vendor.getAvatar() || FIXTURE_IMAGE}"></div>
      <div class="ui violet counter">${vendor.get('cachedAverageRating')}</div>
    </div>
  `;
  } else {
    tpl = `
    <div class='ui map-marker'>
      <div class="photo">
        <img src="${vendor.getAvatar() || FIXTURE_IMAGE}">
      </div>
    </div>
  `;
  }

  let markerContainer = document.createElement('div');
  markerContainer.innerHTML = tpl;

  // create the popup
  let markerPopup = new MapboxGL.Popup({offset: 25})
    .setHTML(`<div>Name : ${vendor.get('name')}, Address : ${vendor.get('address')}, Rating : ${vendor.get('cachedAverageRating')}</div>`);

  // create the marker
  new MapboxGL.Marker(markerContainer, {offset:[-25, -25]})
    .setLngLat([get(vendor, 'lon'), get(vendor, 'lat')])
    .setPopup(markerPopup) // sets a popup on this marker
    .addTo(map);  

Answer 1

您使用的是 MapboxGL 而不是 mapboxgl，代码区分大小写。

您的 vendor 变量也可能有错误，但我们看不到您在答案中如何定义它。如果您可以提供更多信息，我们也许能够提供进一步的帮助。现在:这段代码有效:

mapboxgl.accessToken = '<your access token here>';

var monument = [-77.0353, 38.8895];
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: monument,
    zoom: 15
});
let tpl;
​
    tpl = "text";
​
  let markerContainer = document.createElement('div');
  markerContainer.innerHTML = tpl;
​
  // create the popup
  let markerPopup = new mapboxgl.Popup({offset: 25})
    .setHTML("test");
​
  // create the marker
  new mapboxgl.Marker(markerContainer, {offset:[-25, -25]})
    .setLngLat(monument)
    .setPopup(markerPopup) // sets a popup on this marker
    .addTo(map);