vue 同时使用百度地图BMapGL版本和BMap版本

时间: 2023-07-26 08:10:02 浏览: 291

vue调用百度地图api

在Vue.js应用中调用百度地图API是一项常见的需求，它能帮助开发者实现地图展示、定位、路线规划等功能。本文将详细讲解如何在Vue项目中集成并使用百度地图API。你需要在百度地图开放平台（http://lbsyun.baidu.com/）注册一个账号，创建应用并获取密钥（AK）。这是调用百度地图API的前提，因为每个请求都需要带上这个密钥以验证身份。 1. **安装依赖** 在Vue项目中，通常我们使用CDN链接引入百度地图API，也可以通过npm安装`@baidu/map-jsapi-bundle`来本地引入。如果你选择npm方式，可以使用以下命令： ```bash npm install @baidu/map-jsapi-bundle --save ``` 2. **引入API** 在Vue组件中，可以通过`import`语句引入百度地图API，或者在HTML模板中使用`<script>`标签引入CDN链接。例如，使用npm安装的API： ```javascript import BMap from '@baidu/map-jsapi-bundle'; // 初始化地图所需配置 const mapConfig = { ak: '你的百度地图API密钥', version: '1.4.5', services: true, // 是否加载服务模块 }; // 初始化地图 BMap.init(mapConfig, () => { // 在这里执行地图相关操作 }); ``` 3. **创建地图实例** 创建地图实例是使用API的第一步，需要指定容器元素ID和地图中心点坐标。例如： ```javascript const map = new BMap.Map('mapContainer'); map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 北京市中心，缩放级别15 ``` 4. **添加标记和信息窗口** 你可以添加标记（Marker）到地图上，同时可以关联信息窗口（InfoWindow）显示详细信息： ```javascript const marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建标记 map.addOverlay(marker); // 添加到地图 const infoWindow = new BMap.InfoWindow('这里是标记的信息'); // 创建信息窗口对象 marker.addEventListener('click', function() { this.openInfoWindow(infoWindow); // 点击标记打开信息窗口 }); ``` 5. **定位功能** 使用百度地图API，可以获取用户的当前位置，并设置地图中心点： ```javascript const geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(position => { if (geolocation.getStatus() === BMAP_STATUS_SUCCESS) { map.centerAndZoom(position.point, 15); console.log('当前位置：', position); } else { alert('抱歉，未能成功获取您的位置信息。'); } }, { enableHighAccuracy: true }); // 高精度定位 ``` 6. **路径规划** 百度地图API还提供了路径规划功能，包括驾车、公交、步行等多种方式： ```javascript const from = new BMap.Point(116.404, 39.915); const to = new BMap.Point(116.485, 39.984); const driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, panel: 'drivingPanel' }, }); driving.search(from, to); // 搜索驾车路线 ``` 7. **事件监听** 可以监听地图上的各种事件，如鼠标点击、移动等： ```javascript map.addEventListener('click', function(event) { const point = event.point; console.log('点击位置：', point.lng, point.lat); }); ``` 以上是Vue调用百度地图API的基础使用方法。在实际项目中，你可能需要结合Vue的响应式特性，利用数据绑定和计算属性等进行更复杂的交互设计。在开发过程中，注意合理组织代码，避免全局污染，同时关注性能优化，如延迟加载地图、使用懒加载策略等。 `baidumap-master`这个文件名可能暗示了这是一个包含示例代码或教程资源的项目，你可以查阅其中的内容来进一步学习和实践。

可以同时使用百度地图BMapGL版本和BMap版本，但是需要注意以下几点： 1. 引入的 JavaScript 文件不能重复，需要分别引入BMapGL和BMap的JavaScript文件。 2. 在使用BMapGL时，需要使用BMapGL.Map、BMapGL.Point等对象，而不是BMap的对象。 3. 在BMapGL和BMap之间切换时，需要注意地图容器的ID是否相同，如果不同需要先销毁之前的地图对象。 4. 由于BMapGL是基于WebGL技术实现的，所以相对于BMap会有更高的性能和更好的体验，但是不支持IE浏览器和低版本的Chrome等浏览器。以下是一个使用BMapGL和BMap的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>BMapGL和BMap同时使用示例</title> <style type="text/css"> #map { width: 800px; height: 600px; } </style> </head> <body> <div id="map"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> <script type="text/javascript" src="http://api.map.baidu.com/api_gl/v1.0/map.js"></script> <script type="text/javascript"> // 使用BMapGL创建地图 var mapGL = new BMapGL.Map("map"); mapGL.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); mapGL.addControl(new BMapGL.NavigationControl()); // 使用BMap创建覆盖物 var map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl()); var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); map.addOverlay(marker); </script> </body> </html> ```

阅读全文

vue 同时使用百度地图BMapGL版本和BMap版本

相关推荐

vue中调用百度地图实现搜索等功能

vue用BMap百度地图实现即时搜索功能

在vue 同时使用百度地图BMapGL版本和BMap版本

vue 百度地图BMapGL版本如何使用BMap版本的控件

vue使用百度地图BMapGL画圆

vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

Bmap-offline_vue的api.js资源

echarts+bmap结合可以在百度地图上展现 点图，线图，热力图 等可视化。

Bmap-markerCluster:百度地图10W数量级的打点聚合，解决官方聚合的性能问题

百度地图封装

基于百度地图的离线地图资源压缩包

百度地图api 轨迹回放

百度地图marker动画的实现

百度地图类库 自定义信息窗口

百度地图点聚合自定义样式

uniapp微信小程序使用百度地图bmap-wx.js，实现地图显示(包含初始化百度地图)、获取当前位置（包含地点名称）和围栏守护（包含动态修改大小）的功能，代码实现

vue-baidu-map使用3d地图

Vue 通过百度低头获取当前的位置信息、经纬度

最新推荐

详解vue项目中调用百度地图API使用方法

vue项目中使用天地图

vue 使用高德地图vue-amap组件过程解析

vue中使用百度脑图kityminder-core二次开发的实现

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

俄罗斯RTSD数据集实现交通标志实时检测

管理建模和仿真的文件

预测区间与置信区间：机器学习中的差异与联系

基于KNN通过摄像头实现0-9的识别python代码

易语言开发的文件批量改名工具使用Ex_Dui美化界面

echarts+bmap结合可以在百度地图上展现点图，线图，热力图等可视化。

百度地图类库自定义信息窗口