带有嵌入式推文的地图框弹出窗口

我希望在mapbox地图中嵌入来自选定区域的推文。是否有可能，富媒体可以出现在地图框弹出窗口中吗？到目前为止，我已经设法获得了一张地图来显示指向所选推文的链接，而不是推文本身。

我已经发布了我用来显示标记和弹出窗口的部分 geojson。我把推文的javascript放在geojson之后。任何帮助将不胜感激，谢谢。

<head>
<meta charset='utf-8' />
<title>Example</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
	  
	  .mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Work Sans', Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = ; // enter access token

	var map = new mapboxgl.Map({
container: 'map',
style: , // enter style URL
	  center: [-6.2285,53.3475],
	  zoom: 14
});
	
	var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');
// Add geolocate control to the map.
	map.addControl(new mapboxgl.GeolocateControl({
		positionOptions: {
			enableHighAccuracy: true
		},
		trackUserLocation: true
	}));

map.on('load', function () {
map.addLayer({
"id": "places",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
					    "type": "Point",
"coordinates": [-6.2285,53.3475]
},
"properties": {
"title": "3arena",
"icon": "stadium",
//Twitter Timeline
						"description": "<a class='twitter-timeline' data-tweet-limit='1' href='https://twitter.com/search?q=%403arenadublin' data-widget-id='895222749572063232'>Tweets about @3arenadublin</a>"
}
}]
}
},
"layout": {
"icon-image": "{icon}-15",
			"icon-size": 2,
			"icon-allow-overlap": true
}
});
});
//function to embed tweet
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on('click', 'places', function (e) {
new mapboxgl.Popup()
.setLngLat(e.features[0].geometry.coordinates)
.setHTML('<h3>' + e.features[0].properties.title + '</h3><p>' + e.features[0].properties.description + '</p>')
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'places', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'places', function () {
map.getCanvas().style.cursor = '';
});
</script>
</body>
</html>

Twitter的开发团队自己写了一篇关于嵌入式推文的完整文章。我真的建议您检查一下，因为它提出了两种在您的情况下可能非常有趣的方法：

使用 oEmbed 转换推文网址
使用 JavaScript 渲染推文

o嵌入：

基本上，您只需要在代码中添加对oEmbedAPI 的引用，您就可以显示带有简单链接的嵌入式推文，如下所示：https://publish.twitter.com/oembed?url=https://twitter.com/Interior/status/463440424141459456。

Javascript：

Twitter为开发人员提供了一个Javascript小部件，其中包含许多非常有用的功能，用于决定推文应该何时何地显示在您的网站上。在您的情况下，这可能是一个非常好的解决方案，我真的强烈建议您阅读 Twitter 团队的有关它的文章。

相关内容

最新更新

热门标签：