popup - 在地理编码搜索结果后添加弹出窗口
问题描述
我一直在研究如何在 geocding 搜索结果后添加弹出窗口。目前,我正在使用以下文档进行尝试。在文档中,它只显示了如何使用您自己的数据集进行搜索,并且在搜索完成时会出现标记。
但是,我想在单击标记时添加弹出窗口。
我已经阅读了有关“弹出”的 Mapbox 的其他文档。但是,我似乎无法在此代码中实现。
这是我目前正在尝试进行地理编码的文档:https ://docs.mapbox.com/mapbox-gl-js/example/forward-geocode-custom-data/
解决方案
欢迎!我很久以前就遇到过这个问题。我有多边形,我需要一个弹出窗口才能在点击时出现。我的多边形是危险海洋所在的海洋区域(对船只的警告等)。在这里,我有一个激活 onclick 的功能。然后它确保弹出窗口以正确的顺序出现在屏幕上,并且可以选择更改鼠标光标的样式。
我会更详细地解释,但我认为代码在很大程度上是不言自明的。有时很难在文档中找到好的示例(尽管 Mapbox 最近在文档方面取得了长足的进步。)
检查下面的解决方案,如果它适合您,请随时接受它,否则如果您需要,我也可以帮助您解决问题。我已经为你评论了。
map.on('click', 'HazardousSeasWarning', function (e) {
var coordinates = e.features[0].geometry.coordinates[0][0].slice();
var description = e.features[0].properties.description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'HazardousSeasWarning', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'HazardousSeasWarning', function () {
map.getCanvas().style.cursor = '';
});
推荐阅读
- python - 如何在 django 中为每个请求添加过滤器?
- python - Keras model.fit() 返回 TypeError: 'NoneType' object is not callable when using tf.data.Dataset.from_generator
- css - 我需要从商店页面隐藏运输类别
- ios - Flutter 中的 SnackBar 在 iOS 上不会变得透明
- python - 我可以在 Python 中使用 clang.cindex 解析打印所有 C++ 代码行吗?
- php - 如何在 WooCommerce 中编辑“没有足够的单位..”错误消息
- reactjs - 更新父级的反应状态非常慢
- python - 在 Raspberry Pi 上使用 Python 刷新 Google Calendar API 的身份验证令牌
- regex - 正则表达式匹配所有变量,但排除大写单词
- c++ - Visual Studio 2019 c++latest random_device uniform_int_distribution 抛出未处理的异常