如何在uni-app 中使用百度地图，高精度定位

最新推荐文章于 2024-09-25 17:50:03 发布
最新推荐文章于 2024-09-25 17:50:03 发布
阅读量2.8k 收藏 21
点赞数 11
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mrjieq/article/details/135213249
版权

创建应用

1、在浏览器中搜索‘百度地图开放平台’，选择web开发
在这里插入图片描述
2、进入百度地图开放平台官网控制台，点击【应用管理】-【我的应用】
在这里插入图片描述

3、创建应用
在这里插入图片描述
4、在【我的应用】中找到自己创建的应用并复制【AK】
在这里插入图片描述

打代码喽

准备部分

先创建一个包，分别创建一个js和css文件
在这里插入图片描述
js文件内容：

export default function MapLoader() {
	return new Promise((resolve, reject) => {
		if (window.AMap) {
			resolve(window.AMap);
		} else {
			window._AMapSecurityConfig = {
				securityJsCode: '9637e51b32521c4124c3683b738fa117',
			}
			var script = document.createElement('script');
			script.type = "text/javascript";
			script.async = true;
			script.src =
				"https://api.map.baidu.com/api?type=webgl&v=1.0&ak=";
				//这里ak填入创建应用的ak
			script.onerror = reject;
			document.head.appendChild(script);
		}
		window.initAMap = () => {
			resolve(window.AMap);
		};
	});
}
export function mymap(ak) {
	return new Promise(function(resolve, reject) {
		window.init = function() {
			resolve(mymap)
		}
		var script = document.createElement('script')
		script.type = 'text/javascript'
		script.src =
			`http://api.map.baidu.com/api?v=1.0&type=webgl&ak=&mcode=35:81:1C:D3:2A:63:FB:6B:6E:1C:D4:F7:81:DF:A5:1B:89:57:83:91;uni.UNI342DC80&callback=init`
			//这里也一样
		script.onerror = reject
		document.head.appendChild(script)
	})
}

css文件内容：

html {
  font-size: 12px;
}
.amap-copyright{
  box-sizing: content-box
}
* {
  box-sizing: border-box
}
.input-textarea{
   color:grey;
   height:8em;
   overflow:auto;
   border-radius:0.4rem;
   border:1px solid #ced4da;
   margin-bottom:1rem;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 1.5;
  font-weight: 300;
  color: #111213;
}

hr {
  margin: 0.5rem 0;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1)
}

p {
  margin-top: 0;
  margin-bottom: 0;
}

label {
  display: inline-block;
  margin-bottom: 0.4rem;
}

label, .btn {
  margin-left: 0;
  font-size: 1rem;
}

button, input, select {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
  text-transform: none
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0 0.5rem 0 0;
}

h4 {
  font-family: inherit;
  line-height: 1.8;
  font-weight: 300;
  color: inherit;
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: .5rem
}

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  background-color: transparent;
  background-image: none;
  color: #25A5F7;
  border-color: #25A5F7;
  padding: .25rem .5rem;
  line-height: 1.5;
  border-radius: 1rem;
  -webkit-appearance: button;
  cursor:pointer;
}

.btn:hover {
  color: #fff;
  background-color: #25A5F7;
  border-color: #25A5F7
}

.btn:hover {
  text-decoration: none
}

.input-item {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 3rem;
}

.input-item:last-child {
  margin-bottom: 0;
}

.input-item>select, .input-item>input[type=text], .input-item>input[type=date] {
  position: relative;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0
}

.input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0
}

.input-item-prepend {
  margin-right: -1px;
}

.input-item-text, input[type=text],input[type=date], select {
  height: calc(2.2rem + 2px);
}

.input-item-text {
  width: 6rem;
  text-align: justify;
  padding: 0.4rem 0.7rem;
  display: inline-block;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.input-item-text input[type=checkbox], .input-item-text input[type=radio] {
  margin-top: 0
}

.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: .25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}

.input-text {
  line-height: 2rem;
  margin-right: 2rem;
}

.info hr {
  margin-right: 0;
  margin-left: 0;
  border-top-color: grey;
}

.info {
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: .25rem;
  position: fixed;
  top: 1rem;
  background-color: white;
  width: auto;
  min-width: 22rem;
  border-width: 0;
  right: 1rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
}

.code {
  left: 1.5rem;
  right: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  overflow: auto;
  margin-bottom: 0rem;
}

.code .btn {
  top: 1rem;
  position: absolute;
  right: 1rem;
}

.code .result {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  padding: 1rem;
  bottom: 1rem;
  position: absolute;
  top: 5.5rem;
  right: 1rem;
  left: 1rem;
  overflow: auto;
}

.code .status {
  color: #80adff;
  display: inline-block;
  font-size: 14px;
}

.code h4 {
  display: inline-block;
  max-width: 20rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

select, input[type=text], input[type=date] {
  display: inline-block;
  width: 100%;
  padding: .375rem 1.75rem .375rem .75rem;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
  background-size: 8px 10px;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none
}

input[type=text],input[type=date] {
  background: #fff;
  padding: .375rem .75rem;
}

select:focus, input[type=text]:focus, input[type=date]:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
}

.btn:focus {
  outline: 0;
  box-shadow: none;
}

select:focus::-ms-value, input[type=text]:focus::-ms-value,input[type=date]:focus::-ms-value {
  color: #495057;
  background-color: #fff
}


/* native toastr */
.native-toast {
  position: fixed;
  background-color: rgba(50, 50, 50, .8);
  border-radius: 33px;
  color: white;
  left: 50%;
  text-align: center;
  padding: 6px 12px;
  opacity: 0;
  z-index: 99999;
  transition: transform .25s, opacity .25s, top .25s;
  box-sizing: border-box;
}

.native-toast-bottom {
  bottom: 50px;
  -ms-transform: translateX(-50%) translateY(50px);
      transform: translateX(-50%) translateY(50px)
}

.native-toast-bottom.native-toast-shown {
  opacity: 1;
  -ms-transform: translateX(-50%) translateY(0);
      transform: translateX(-50%) translateY(0);
}

.native-toast-bottom.native-toast-edge {
  bottom: 0;
}

.native-toast-top {
  top: 50px;
  -ms-transform: translateX(-50%) translateY(-50px);
      transform: translateX(-50%) translateY(-50px)
}

.native-toast-top.native-toast-shown {
  opacity: 1;
  -ms-transform: translateX(-50%) translateY(0);
      transform: translateX(-50%) translateY(0);
}

.native-toast-top.native-toast-edge {
  top: 0;
}

.native-toast-center {
  top: 0;
  -ms-transform: translateX(-50%) translateY(-50px);
      transform: translateX(-50%) translateY(-50px)
}

.native-toast-center.native-toast-shown {
  opacity: 1;
  top: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
}

.native-toast-edge {
  border-radius: 0;
  width: 100%;
  text-align: left;
}

@media screen and (min-width: 40rem) {
  .native-toast:not(.native-toast-edge) {
    max-width: 18rem;
  }
}

/*
  max-width does not seem to work in small screen?
*/

/*@media screen and (max-width: 768px) {
  .native-toast:not(.native-toast-edge) {
    max-width: 400px;
  }
}

@media screen and (max-width: 468px) {
  .native-toast:not(.native-toast-edge) {
    max-width: 300px;
  }
}*/

/* types */

.native-toast-error {
  background-color: #d92727;
  color: white;
}

.native-toast-success {
  background-color: #62a465;
  color: white;
}

.native-toast-warning {
  background-color: #fdaf17;
  color: white;
}

.native-toast-info {
  background-color: #5060ba;
  color: white;
}

[class^="native-toast-icon-"] {
  vertical-align: middle;
  margin-right: 8px
}

[class^="native-toast-icon-"] svg {
  width: 16px;
  height: 16px;
}

开发百度地图

1、创建一个vue文件，把创建的js导入到项目中：

import {mymap} from '@/api/map/map.js'

2、让百度地图显示

template代码：
<view class="global">
	<view id="allmap" class="map"></view>
</view>
<!--添加定位按钮-->
<view>
	<button style="width: 40px;height: 40px;line-height: 40px;margin-top: -38%;float:									right;margin-right: 10px;z-index: 10" @click="getLatLen">
		<uni-icons style="margin: 0 auto;margin-left: -80%;" type="location" size="30"></uni-icons>
	</button>
</view>
script代码：

需要的参数，按自己需求添加
在这里插入图片描述

onLoad() {
	this.map(this.latitude,this.longitude)
	this.nowLat = uni.getStorageSync('nowLat')
	this.nowLng = uni.getStorageSync('nowLng')
},
map(latitude,longitude){
	// ================百度地图==================
	mymap(this.ak).then((mymap) => {
		// 创建百度地图实例				
		var map = new BMapGL.Map("allmap");
		map.centerAndZoom(new BMapGL.Point(116.331398,39.897445),16);
		map.enableScrollWheelZoom(true);
		// var geoc = new BMapGL.Geocoder();
		console.log(latitude,longitude)
		if(latitude != "" && longitude != ""){
			map.clearOverlays(); 
			var new_point = new BMapGL.Point(longitude,latitude);
			var mk = new BMapGL.Marker(new_point);  // 创建标注
			map.addOverlay(mk);              // 将标注添加到地图中
			map.panTo(new_point);    
			console.log(new_point)
			//点击查看标点信息
			var opts = 
			"<div>"
				+"<h4 style='margin:-5px 0 5px 0;'>"+this.name+"</h4>"
				+"<p style='font-size:13px'>"
					+this.address
				+"</p>"
			+"</div>";
			var infoWindow = new BMapGL.InfoWindow(opts);  // 创建信息窗口对象 
			mk.addEventListener("click", function(e){		
				map.openInfoWindow(infoWindow, new_point); //开启信息窗口
			}); 		
		}
	});
},
getLatLen(){
	var map = new BMapGL.Map("allmap");
	map.centerAndZoom(new BMapGL.Point(116.331398,39.897445),16);
	map.enableScrollWheelZoom(true);
	var geolocation = new BMapGL.Geolocation();
	var geoc = new BMapGL.Geocoder();
	geolocation.getCurrentPosition(function(r){
    	if(this.getStatus() == BMAP_STATUS_SUCCESS){
	   		var mk = new BMapGL.Marker(r.point);//创建标注
		 	map.addOverlay(mk);
			map.panTo(r.point);
			//点击标注获取位置信息
			this.nowLat = r.point.lat
			this.nowLng = r.point.lng
			uni.setStorageSync("nowLat",this.nowLat)
			uni.setStorageSync("nowLng",this.nowLng)
			var opts = {
				width : 200,     // 信息窗口宽度
				height: 50,     // 信息窗口高度
				title : '我的位置' , // 信息窗口标题
			}
			var infoWindow = {}
			geoc.getLocation(r.point, function(rs){
				var addComp = rs.address;
				uni.setStorageSync("nowAddress",addComp)
				infoWindow = new BMapGL.InfoWindow(addComp, opts);  // 创建信息窗口对象 
			})
			mk.addEventListener("click", function(e){
				var pt = e.srcElement.latLng;
				map.openInfoWindow(infoWindow, r.point); //开启信息窗口
				this.nowAddress = infoWindow.content
			}); 
		} else {
			console.log('failed' + this.getStatus());
		}        
	});				
},

百度地图就可以显示在项目中:
在这里插入图片描述
到达某个地方的路线,如果有需要的话会在下一篇文章中发出:
在这里插入图片描述

帅逼王二狗
关注
uni-app - 使用地图功能打包安卓apk的完美流程以及重要的注意事项（带您一次打包成功）
前端充电宝
04-29 953
uni-app - 使用地图功能打包安卓apk的完美流程以及重要的注意事项（带您一次打包成功）
uni-app 支持多端第三方地图定位的方法
11-30
简介 该方法支持跳转第三方地图并定位指定坐标。 APP端跳转至百度地图（第三方软件）；若无，则跳转至高德地图（第三方软件）；若均无，则打开腾讯地图（uni自带方法：uni.openLocation） 其它端打开腾讯地图（uni自带方法：uni.openLocation） demo 源码：https://github.com/yapeee/uni-components 测试数据： wgs84: 39.9078008469, 116.391290596 bd09: 39.915547, 116.403909 gcj02: 39.9091591069, 116.3974783161 基础
记录踩坑 uniapp 引入百度地图(微信小程序,H5,APP)
最新发布
weixin_69174819的博客
09-25 1158
uniapp 引入百度地图(微信小程序,H5,APP)防踩坑
uniapp使用百度地图
一切都不太晚
09-19 9073
百度地图的使用心得，手把手教你玩转百度地图，看了秒懂。
uniapp中使用百度地图(初学者保姆式教学，持续更新)
qq_51649346的博客
03-25 7462
基本使用讲解//创建地图实例，与id匹配 var point = new BMapGL . Point(116.404 , 39.915);//创建中心点的坐标(经纬度)，百度地图在坐标上有个转换，百度对外接口用的是BD09坐标系，这个下一个博客会细说 map . centerAndZoom(point , 15);// 初始化地图，设置中心点坐标和地图级别 map . setHeading(64.5);//设置地图旋转角度 map . setTilt(73);//设置地图的倾斜角度部分参数。
uniapp使用百度地图（一）
一切都不太晚
12-06 7501
玩转百度地图，轨迹，定位，获取经纬度，窗口弹出，等等，应有尽有
address(uni-app经纬度定位范围内签到)
06-24
本话题将深入探讨如何在uni-app中实现基于经纬度定位的签到功能。 首先，我们要理解uni-app中的定位功能。uni-app提供了`uni.getLocation`接口，这个接口用于获取当前的地理位置、速度。开发者可以通过设置参数，...
uni-app腾讯地图显示定位
06-27
要在uni-app中使用，首先需要在腾讯地图开放平台上注册获取AppKey，这个Key将在后续的代码中用于验证身份。 集成腾讯地图SDK： 1. 在uni-app项目中，通过npm安装腾讯地图插件，命令如下： ``` npm install @...
uni-app 中使用uni push的demo
02-21
【uni-app 中使用uni push的全面解析】 uni-app是一款由DCloud(海豚浏览器团队)开发的多端统一开发框架，它允许开发者使用Vue.js语法编写一次代码，就能跨平台运行到iOS、Android、H5、小程序等多个平台。而uni ...
在uni-app中使用pdf.js实现在手机上打开pdf
11-04
在uni-app中实现PDF在手机...总之，在uni-app中使用PDF.js实现手机上打开PDF，需要完成引入PDF.js库、加载PDF文档、渲染页面及处理用户交互等步骤。通过以上方法，你可以在uni-app的各个平台上提供流畅的PDF查看体验。
uniapp简单使用百度地图
呆子小木心的博客
02-13 4116
uniapp简单使用百度地图
在uniapp微信小程序中使用百度地图
qq_45281478的博客
01-16 2076
html代码：复制百度地图官网的。请求定位，当不传参数的时候，会默认是请求当前位置。**第一步：**申请秘钥AK，这个自行百度申请。**第三步：**在项目中导入js API ,**第二步：**引入百度地图js模块。下载js文件后，解压，并放到项目中。js首先需要导入js api。根据经纬度，请求具体地址。
uniapp在App端百度地图使用记录
Demon's blog
08-07 1475
uniapp在App端百度地图使用记录
uniapp H5端使用百度地图
卿本无忧的博客
06-26 1733
uniapp H5端使用百度地图，添加标记点并点击标记点显示地址信息
uniapp开发h5项目使用baidu-map组件实现地图引入，定位渲染，弹窗功能实现，根据定位路线图的实现
m0_72929120的博客
03-20 1354
【代码】uniapp开发h5项目使用baidu-map组件实现地图引入，定位渲染，弹窗功能实现，根据定位路线图的实现。
【App端】uni-app使用百度地图api和echarts省市地图下钻
aDiaoYa_的博客
08-28 3300
近期的app项目中想加一个功能，展示全国各地的某一数据统计情况，想来想去，用echarts做地图数据可视化直观且美观。于是就去研究了如何使用，其实在移动端使用echarts地图踩的bug挺多的，总结如下。
uniapp在引用百度地图实现自定义省市区海量点
weixin_52830464的博客
06-05 825
​vue在手机端端引用百度地图实现自定义省、市、区、项目、设备海量点，根据地图的zoomLevel设置成4-6级是省级别、7-9级是市级别、10-12级是区级别、13和14级是项目级别、15级-15级以上是设备级别。省、市、区、项目的数据，对象的字段是: name、value、latitude、longitude、id。设备的数据，对象的字段是: name、value、latitude、longitude、deviceid。2.可自行设置个性化样式模板-下图使用的是"眼眸"
uni-app自带的定位功能不准，如何引入定位算法库进行优化
06-10
如果uni-app自带的定位功能精度不够高，可以尝试引入第三方的定位算法库进行优化。以下是一些常用的定位算法库： 1. 高德地图的AMap SDK：提供了高精度定位、离线地图、逆地理编码等功能，可以有效提高定位精度。可以在uni-app的manifest.json文件中加入以下代码，引入AMap SDK： ```json "app-plus": { "modules": { "AMap": "cachefile://path/to/AMap.js" } } ``` 然后在uni-app的页面中，可以使用以下代码进行定位： ```javascript import AMap from '@/modules/AMap' AMap.plugin('AMap.Geolocation', function () { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位，默认为false timeout: 5000, // 超时时间，默认为5秒 maximumAge: 0, // 定位结果缓存时间，默认为0 convert: true, // 是否使用火星坐标系，默认为true noIpLocate: 0, // 是否禁止使用IP定位，默认为0 noGeoLocation: 0, // 是否禁止使用浏览器定位，默认为0 noWatch: true // 是否禁止使用watchPosition，默认为false }) geolocation.getCurrentPosition(function (status, result) { if (status === 'complete') { console.log(result) } else { console.log(status) } }) }) ``` 2. 百度地图的LBS SDK：提供了定位、地图、导航等功能，可以用来优化定位精度。可以在uni-app的manifest.json文件中加入以下代码，引入LBS SDK： ```json "app-plus": { "modules": { "baidumap": { "version": "1.0.0", "provider": "https://ext.dcloud.net.cn/plugin?id=225" } } } ``` 然后在uni-app的页面中，可以使用以下代码进行定位： ```javascript import baidumap from '@/modules/baidumap' uni.getProvider({ service: 'location', success: function (res) { if (~res.provider.indexOf('baidu')) { baidumap.getLocation({ success: function (result) { console.log(result) }, fail: function (error) { console.log(error) } }) } } }) ``` 需要注意的是，引入第三方的定位算法库，可能会增加应用的体积，并且使用的时候需要注意权限申请和用户隐私保护。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值