百度地图的标记点和标记点的右键弹出菜单

最新推荐文章于 2025-06-24 09:30:44 发布

remake_save

最新推荐文章于 2025-06-24 09:30:44 发布

阅读量511

点赞数

CC 4.0 BY-SA版权

文章标签： java vue.js

本文链接：https://blog.youkuaiyun.com/remake_save/article/details/126379023

这段代码展示了如何在地图上使用Vue和百度地图API创建标记，并为每个标记添加右键菜单。用户可以点击标记查看详细信息，或者通过右键菜单选择编辑或删除标记。这涉及到前端开发中的地图交互和用户界面设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<bm-marker
                        v-for="(marker, i) of markers"
                        :position="{ lng: marker.lng, lat: marker.lat }"
                        @click="lookDetail(marker)"
                        :key="i"
                    >
                        <!--:icon="{
                        url: require('@/assets/' + item.sta + '.png'),
                        size: { width: 25, height: 25 }
                    }"-->
                        <!-- 右键mark弹出菜单 -->
                        <bm-context-menu :width="68">
                            <bm-context-menu-item
                                :callback="
                                    e => {
                                        skipUrl(e, marker);
                                    }
                                "
                                text="跳转列表"
                            ></bm-context-menu-item>
                            <bm-context-menu-item
                                :callback="
                                    e => {
                                        editShow(e, marker);
                                    }
                                "
                                text="编辑路口"
                            ></bm-context-menu-item>
                            <bm-context-menu-item
                                :callback="
                                    e => {
                                        deleteShow(e, marker);
                                    }
                                "
                                text="删除路口"
                            ></bm-context-menu-item>
                        </bm-context-menu>
                    </bm-marker>