2017-05-05 2 views
0

ではありません -setLngLat()setPopupが、私はこのエラーを取得し、ポップアップが追加されていないレンダービュー一度機能

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); 

答えて

1

このリンクをたどってきたあなたは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); 
+0

MapboxGLは正しいです。私の場合、私は初期化しました var MapboxGL = window.mapboxgl; その後、MapboxGLを使用します。 –

+0

「ベンダー」変数に関する詳細情報をお送りしますか? – zibethin

0

エラーメッセージからデバッグするのは簡単です。明らかに、setLngLat()Markerではないものを返すので、setPopup()は定義されていません。

これはなぜですか?あなたが間違ったことをsetLngLat()に渡しているからです。 LngLatオブジェクト(hereと定義)を渡す必要があります。

あなたのget()関数で何をしようとしているのか分かりませんが、明らかに必要な数値は返されません。

+0

私は正しいlat lat値を渡します。単一のパラメータまたは2つのパラメータで配列を渡すことができます(lat、lon) –

関連する問題