uniapp使用百度地图 (vue 使用 vue-baidu-map)及坐标转换

最新推荐文章于 2025-09-15 09:53:45 发布

原创

最新推荐文章于 2025-09-15 09:53:45 发布 · 1.1w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #vue #map #百度

这篇博客介绍了如何在UniApp项目中利用Vue-Baidu-Map组件显示GPS坐标，并进行坐标转换。首先，博主通过初始化npm并安装vue-baidu-map插件来引入百度地图。然后，在Vue组件中设置地图属性和事件监听，使用百度地图的Convertor类进行坐标转换。在获取到接口返回的经纬度后，通过convertor.translate方法将GPS坐标转换为百度坐标。转换完成后，更新地图上的路径和起点位置。整个过程涉及到了地图展示、坐标转换和异步处理等关键步骤。

最近有个需求是对GPS的坐标在unaip中展示对坐标转化

因为拿到的是 GPS 坐标 uniapp 的map是腾讯的，但是腾讯的地图转换数据有限制和处理方面是异步，最后考虑用百度地图。

需要

百度地图的key
uniapp 安装 npm包官网uniapp 咱装 npm包支持
了解百度地图 2.0 的参考类百度地图参考类地址

开始

若是 uniapp 项目没有使用 npm 管理依赖，需要先在项目根目录初始化npm 工程

初始化 npm 指令： npm init -y
判断项目是否使用npm管理依赖：项目的根目录是否含有 package.json 文件
cli 项目的都是含有 package.json 的，但是HBuilderX创建的项目是默认没有的，需要通过指令来初始化

安装依赖百度地图 Vue Baidu Map

指令： npm install vue-baidu-map --save
vue-baidu-map 是咱需要安装的包的名字

4.在项目引入 Vue Baidu Map
在这里插入图片描述

// 百度地图 调用百度
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
   
   
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'fSH0tNa******gUWb2I' 
})

页面调用

<!-- 展示地图 -->
		<view  class="map">
			<!-- <busmap :lineCode="lineCode" ></busmap> -->
			<baidu-map @ready="loadedMap" style="width: 750rpx; height:1100rpx;" :center="startposition" :zoom="15"
				:scroll-wheel-zoom="true">

				<!-- <bm-marker :position="startposition"  animation="BMAP_ANIMATION_BOUNCE"> -->
				<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
				<bm-point-collection :points="polylinePaths" shape=" BMAP_POINT_SHAPE_WATERDROP

最低0.47元/天解锁文章