记录mapbox使用marker以及popup

最新推荐文章于 2023-06-29 15:42:46 发布

「已注销」

最新推荐文章于 2023-06-29 15:42:46 发布

阅读量705

点赞数

分类专栏： mapbox 文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/xiaofan_queen/article/details/129144321

版权

mapbox 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

准备一个展示的组件

使用组件

// PopupNode 就是第一步准备的组件
import {createApp} from 'vue';
// 将组件转为popup能用的dom
const createPopup = (fields, props, popup: any) => {
    let parent = document.createElement('div');
    parent.setAttribute('id', '__popop');
    // 第二个为传入组件的props,在组件内部可以接收到
    const app = createApp(PopupNode, {fields, props, popup, type: 'feature'});
    let instance = app.mount(parent);
    return instance.$el;
};
// 创建prop
popup.value = new mapboxgl.Popup({closeButton: false, maxWidth: '300px'});
popup.value.setLngLat([properties?.lng || e.lngLat.lng, properties?.lat || e.lngLat.lat]);
let dom = createPopup(fields, features, popup.value);
popup.value.setDOMContent(dom);
// 创建marker
temMarker.setPopup(areaSelect.temPopup);
// 通过这个togglePopup方法就是实现点击marker展示或隐藏popup
temMarker.togglePopup();