0

视图渲染后，我收到此错误并且未添加弹出窗口-

mapbox-gl.js:176 TypeError: (intermediate value).setLngLat(...).setPopup 不是函数(...)

有没有人面对这个或知道解决这个问题的方法？

代码是在标记上设置弹出窗口，我按照这个链接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);
4

2 回答 2

2

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

您的供应商变量中也可能存在错误，但我们看不到您在上面的答案中如何定义它。如果您能提供更多信息，我们可能会提供更多帮助。现在：这段代码有效：

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);
于 2017-05-05T12:48:28.853 回答
0

这应该很容易让您从错误消息中进行调试。显然，setLngLat()正在返回不是 a 的东西Marker，因此setPopup()没有在其上定义。

为什么这样做？因为您将错误的东西传递给setLngLat(). 您应该传递一个LngLat对象（在此处定义）。

我不太确定你想用你的get()函数做什么，但它显然没有按要求返回数字。

于 2017-05-08T03:13:00.530 回答