个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我希望在 mapbox map 中嵌入选定区域的推文。富媒体是否可以出现在 mapbox 弹出窗口中？到目前为止，我已经设法获得一张 map 来显示所选推文的链接，但不显示推文本身。
我已经发布了我用来显示标记和弹出窗口的部分 geojson。我在 geojson 之后放置了推文的 javascript。非常感谢任何帮助，谢谢。
<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 的开发团队自己编写了一个关于嵌入式推文的 complete article。我真的建议您检查一下，因为它提出了两种可能对您的情况非常有趣的方法:
o嵌入:
基本上，您只需在代码中添加对 oEmbed API 的引用，您就可以通过简单的链接显示嵌入的推文，如下所示:https://publish.twitter.com/oembed?url=https://twitter.com/Interior/status/463440424141459456。
Javascript:
Twitter 为开发人员提供了一个 Javascript 小部件，其中包含许多非常有用的功能来决定何时何地应在您的网站上显示推文。对于您的情况，这可能是一个非常好的解决方案，我真的建议您阅读 Twitter 团队关于它的文章。
关于javascript - 带有嵌入式推文的 Mapbox 弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45635855/
26
4
0
我想开发一个 Skype 机器人，它将用户名作为输入，并根据用户输入以相反的字符大小写表示hello username。简而言之，如果用户输入他的名字 james，我的机器人会回复他为 Hello J
我是一名优秀的程序员,十分优秀！