- 综合排序
- 最热优先
- 最新优先
- 来自专栏辰远
Vue项目引入百度地图
ak: 'GpRqD2Sowifs********RRRRVl9' }); 然后就可以在组件里使用了，最简单的一个例子 <template>
<baidu-map <bm-info-window :show="map.show">Hello~</bm-info-window> </bm-marker> </baidu-map map.location"/> </a-form-item> </a-col> </a-row> <baidu-map :keyword="map.keyword" :auto-viewport="true" :location="map.location"></bm-local-search> </baidu-map85830编辑于 2022-11-15来自专栏软件Vue使用百度地图
/README.zh.md 在线文档：https://dafrok.github.io/vue-baidu-map 安装依赖 $ npm install vue-baidu-map 初始化百度地图 <baidu-map style="width: 100%; height: 66vh;flex-direction: column" ak="你自己的应用ak" center="北京"> </baidu-map components: { BaiduMap, }, } </script 到这里一切都很正常，接下来介绍几个组件，在使用的过程中会遇到的问题，举例一个 BmNavigation地图缩放控件 <baidu-map style="width: 100%; height: 66vh;flex-direction: column" ak="你自己的应用ak" center="北京"> </baidu-map style="width: 100%; height: 66vh;flex-direction: column" ak="你自己的应用ak" center="北京"> </baidu-map
82420编辑于 2023-02-21来自专栏404使用 vue-baidu-map
是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: 'YOUR_APP_KEY' }) 基础用法 <template> <baidu-map class="bm-view"> </baidu-map> </template> <style> .bm-view { width: 100%; height: 300px; } </ // 在右上角加入比例尺控件 <template> <baidu-map class="map" center="北京"> <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT "></bm-scale> </baidu-map> </template> // 自定义测距控件 <template> <baidu-map class="map" :zoom="zoom" 完整代码 贴一份完整代码 // bmap.vue <template>
<baidu-map class="bm-view" :center1.6K10编辑于 2022-04-25来自专栏404解决 vue-baidu-map 无法绘制折线方向箭头
map.addOverlay(overlay); bindEvents.call(this, overlay); } } }; </script> 地图文件中使用新的polyline组件 <baidu-map " stroke-color="#0091ea" :stroke-opacity="0.8" :stroke-weight="10" ></new-polyline> </baidu-map
95120编辑于 2022-04-25来自专栏夏天的前端笔记地图功能的实现
el-button type="primary">搜索</el-button> -->
<baidu-map style="font-size: 13px" ></bm-info-window> --> </bm-marker> </baidu-map34910编辑于 2024-01-18来自专栏web秀Vue.js下引入百度地图jsApi的两种方法
vue-baidu-map' Vue.use(BaiduMap, { ak: 'YOUR_APP_KEY' //这个地方是官方提供的ak密钥 }) （3）组件使用 <template> <baidu-map class="map"> </baidu-map> </template> <style> /* The container of BaiduMap must be set width & height
5.5K10发布于 2019-12-10来自专栏程序小小事这可能是 Vue 接入百度地图的最佳组件了
<template> <baidu-map class="bm-view"> </baidu-map></template>开发体验官网上的文档以及代码例子非常多，这让新手们非常容易上手。
57700编辑于 2023-07-20来自专栏夏天的前端笔记组件需要覆盖下面的按钮样式
el-button type="primary">搜索</el-button> -->
<baidu-map :dragging="true" @dragend="markerDragOver" > </bm-marker> </baidu-map45210编辑于 2024-01-18来自专栏前端文章小tipsvue中引入百度地图API
import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { ak: 'YOUR_APP_KEY' }) 使用 <template> <baidu-map class="map"> </baidu-map> </template> <style> /* The container of BaiduMap must be set width & height
69920编辑于 2021-11-30来自专栏国标视频云平台免费视频直播、点播H5播放器SkeyeWebPlayer 结合百度地图sdk实现电子地图播放功能
BmView, BmLocalSearch, BmMarker, BmInfoWindow },渲染地图我想大家应该都会吧，直接上代码：<template>
<baidu-map -- 监控窗体 --> <VideoWindow ref="videoWindow"></VideoWindow> </baidu-map></template>在监控点数据中绑定好经纬度坐标3.8K30编辑于 2023-04-04来自专栏前端实验室这可能是 Vue 接入百度地图的最佳组件了！
<template> <baidu-map class="bm-view"> </baidu-map> </template> 开发体验 官网上的文档以及代码例子非常多，这让新手们非常容易上手
87330编辑于 2022-12-02来自专栏王磊的博客干货分享！MCP 实现原理，小白也能看懂
例如要调用百度地图提供的 8 大核心功能：地理编码、逆地理编码、地点检索、路线规划、天气查询、IP 定位等功能时，我们只需要添加以下 json 就能轻松调用了： { "mcpServers": { "baidu-map
90310编辑于 2025-04-12来自专栏javascript趣味编程如何在vue单页应用中使用百度地图
<baidu-map :style="{width:map.width,height:map.height}" class="map" ak="你的百度地图秘钥" :zoom="map.zoom" :center right">{{infoWindow.info.air}}m³
</bm-info-window> </baidu-map div><baidu-map right">{{infoWindow.info.air}}m³ </bm-info-window> </baidu-map2K20发布于 2021-08-13</baidu-map来自专栏码艺坊Vue 3 实战：深度集成百度地图 (Baidu Map) —— 打造智慧城市充电站分布图
2.1模板结构(Template)我们的地图层级结构如下：基础地图(baidu-map)路况图层(bm-traffic)行政边界(bm-boundary)点位循环：标记(bm-marker)自定义卡片( --5.视野复原控件--><divclass="reset-control"@click="resetMapBounds"title="复原视野">⟲
41710编辑于 2026-01-12来自专栏Dawnzhang的开发者手册vue项目中遇到的那些事。
lbsyun.baidu.com/apiconsole/key */ ak: 'Zgbme5XaLreej7Oribs9yk317sOFG3OP' }) 使用示例： <baidu-map "['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> </baidu-map
1.5K20发布于 2019-03-04vue2 百度地图实现 车在线路上移动 BMap、BMapGL
<template>
<baidu-map id="bd_map_d" @ready="initMap1"></baidu-map> <!37010编辑于 2025-12-15
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号