APIから渡ってきた位置情報をReactMapGLの<Marker>でピンを立てたいのですが、
直接数値を打ち込んだ時はうまくピンが立てられるのに、map関数で取り出した変数を埋め込んだら下記のようのエラーになりました。
console
1× 2←→1 of 99 errors on the page 3Error: @math.gl/web-mercator: assertion failed. 4assert 5src/assert.js:6 6 3 | // so no need to support it here 7 4 | export default function assert(condition, message) { 8 5 | if (!condition) { 9> 6 | throw new Error(message || '@math.gl/web-mercator: assertion failed.'); 10 7 | } 11 8 | } 12 9 |
こっちは直接数値を埋め込んだコード(うまくいく)
{item.latitude}
と{item.longitude}
も値が表示されている。
jsx
1 <ReactMapGL 2 {...viewport} 3 onViewportChange={nextViewport => setViewport(nextViewport)} 4 mapboxApiAccessToken={TOKEN} 5 mapStyle="mapbox://styles/mapbox/light-v9" 6 > 7 {articles.map((item) => ( 8 <div key={item.id}> 9 {item.latitude} 10 {item.longitude} 11 <Marker latitude={ 34.723675 } longitude={ 135.334848 }> 12 <img src={LocateIcon} alt="locate" /> 13 </Marker> 14 </div> 15 ))} 16 </ReactMapGL>
latitude
とlongitude
に{item.latitude}
と{item.longitude}
を入れたコード(上記エラーで返される)
jsx
1 <ReactMapGL 2 {...viewport} 3 onViewportChange={nextViewport => setViewport(nextViewport)} 4 mapboxApiAccessToken={TOKEN} 5 mapStyle="mapbox://styles/mapbox/light-v9" 6 > 7 {articles.map((item) => ( 8 <div key={item.id}> 9 <Marker latitude={item.latitude} longitude={item.longitude}> 10 <img src={LocateIcon} alt="locate" /> 11 </Marker> 12 </div> 13 ))} 14 </ReactMapGL>
あなたの回答
tips
プレビュー