uniapp APP、H5和微信小程序 使用百度地图，H5动态加载百度地图sdk，cover-image图片不显示，标准基座模拟器地图不显示，表单校验字段[‘**‘]在数据库中不存在

APP里面的几个注意项

1. 在百度地图开放平台申请密匙，在manifest.json App模块配置的地图模块选择百度地图并填入申请到的appkey。
2. 页面使用uniapp的map标签，要在地图上面覆盖图片、内容等，使用cover-image、cover-view，因为map是原生组件，覆盖的内容有时不显示，使用v-if控制（这里不能使用v-show），在onload里面设置延迟几百毫秒显示；百度地图在自定义基座和打包才能正常显示，标准基座不会显示；
3. 使用uni.getLocation({})获取定位，type传gcj02，在自定义基座中，定位获取到的坐标不用转为百度就是正常，但是打包后需要转为百度marker才能准确标记；

<template>
	<map ref="allmap" class="allmap" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale">
		<cover-image class="icon_img" v-if="showCoverImg" src="/static/image/map_search.png"></cover-image>
	</map>
</template>
<script>
	import { gcj02tobd09 } from '@/utils/index.js'
	export default {
		data() {
			return {
				scale: "16",
				latitude: '',
				longitude:'',
				markers: [],
			}
		},
		onLoad() {
			const self = this
			self.getUserLocation()
			setTimeout(()=>{
				self.showCoverImg = true
			}, 500)
		},
		methods: {
			getUserLocation(){
				const self = this
				uni.showToast({
					title: '正在获取用户定位...',
					icon: 'none'
				});
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res => {
						uni.showToast({
							title: '定位成功',
							icon: 'none'
						});
						// gcj02要转成百度坐标, gcj02tobd09为事先定义好的经纬度转换方法
						let formatLonlat = gcj02tobd09(res.longitude, res.latitude)
						self.latitude = formatLonlat.latitude
						self.longitude = formatLonlat.longitude
						// 获取定位后可进行其他操作
					},
					fail: (fail) => {
						uni.showToast({
							title: '定位失败',
							icon: 'none'
						});
					},
					complete: () => {
						
					}
				})
			},
		}
	}
	
</script>
<style lang="scss" scoped>
	.allmap {
		width: 750rpx;
		width: 100%;
		height: calc(50vh - var(--status-bar-height));
	}
	.icon_img {
		position: absolute;
		right: 12rpx;
		width: 80rpx;
		height: 80rpx;
	}
</style>

H5里面的几个注意项

1. H5也要在开放平台申请ak，与APP的不可通用；
2. H5里面不使用原生组件map;
3. 动态引入百度地图sdk，并使用地图加载成功后的回调函数进行其他操作，否则地图没加载成功就使用new BMap()等方法会报错；

<template>
	<view id="allmap"></view>
	<image class="icon_img" src="/static/image/map_search.png"></image>
</template>
<script>
	import { gcj02tobd09 } from '@/utils/index.js'
	export default {
		data() {
			return {
				latitude: '',
				longitude:'',
			}
		},
		onLoad() {
			loadBaiduMap()
			const self = this
			setTimeout(()=>{
				self.initialize()
				self.getUserLocation()
			},200)
		},
		methods: {
			loadBaiduMap() {
			 	// 移动端H5使用v3.0版本比较好，h5的ak是申请的web平台的ak与app的ak是不一样的，initialize为地图加载成功的回调
				var script = document.createElement('script');
				script.src = "https://api.map.baidu.com/api?v=3.0&ak=百度AK&callback=initialize";
				document.body.appendChild(script);
			},
			initialize(){
				var map = new BMap.Map("allmap");
				map.centerAndZoom(new BMap.Point(this.longitude, this.latitude), 14);  // 初始化地图,设置中心点坐标和地图级别
				// 自定义marker图标	
				const myIcon = new BMap.Icon('static/map/marker.png', new BMap.Size(32, 32));
				let marker = new BMap.Marker(new BMap.Point(this.longitude, this.latitude),{
					icon: myIcon
				});
				map.addOverlay(marker)
			},
			getUserLocation(){
				// 这里可以使用uni.getLocation()定位，也可以使用百度地图里面的获取定位，使用百度地图里面的获取定位不需要进行经纬度转换
				var map = new BMap.Map("allmap");
				map.centerAndZoom(new BMap.Point(this.longitude, this.latitude), 14);
				uni.showLoading({
					title: '定位中...',
					mask: true,
				})
				const self = this
				var geolocation = new BMap.Geolocation()
				geolocation.getCurrentPosition(function(res){
					if(this.getStatus() == BMAP_STATUS_SUCCESS){
						self.getLocationSuccess = true
						uni.hideLoading()
						uni.showToast({
							title: '定位成功',
							icon: 'none',
						});
						map.setCenter(res.point)
						self.longitude = res.longitude
						self.latitude = res.latitude
					
						const myIcon = new BMap.Icon('static/map/marker.png', new BMap.Size(32, 32));
						let marker = new BMap.Marker(new BMap.Point(self.searchQuery.lon, self.searchQuery.lat),{
							icon: myIcon
						});
						map.addOverlay(marker)
						map.panTo(res.point) // 平滑移动
						// 获取定位成功后进行其他操作
					}else{
						uni.showToast({
							title: '定位失败，请稍后重试！',
							icon: 'none',
						});
					}
				})
			},
		}
	}
	
</script>
<style lang="scss" scoped>
	#allmap {
		width: 750rpx;
		width: 100%;
		height: calc(50vh - var(--status-bar-height));
	}
	.icon_img {
		position: absolute;
		right: 12rpx;
		width: 80rpx;
		height: 80rpx;
	}
</style>

微信小程序注意项

1. 虽然百度地图有微信小程序的api，但并没有用，因为小程序根本不能直接使用百度地图，只能采用web-view方式引入外链嵌入，其实uniapp H5的百度地图实现了，将H5地图页面地址赋值web-view的src就可以，在小程序里面配置业务域名即可;

<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		// webUrl是H5页面的地图
		<web-view :src="webUrl"></web-view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<map ref="allmap" class="allmap" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale">
			<cover-image class="icon_img" v-if="showCoverImg" src="/static/image/map_search.png"></cover-image>
		</map>
		<!-- #endif -->
	</view>
</template>

uni-forms校验出现字段在数据库中不存在的错误的可能原因是：

1. uni-forms-item 加了name 属性，但是在rules中没有设置规则，即使是非必填，只要加了 name 属性，就必须在 rules 中设置规则，否则报错 “字段在数据库中不存在”；
2. 使用了 validateFunction 时，必须在 onReady 生命周期调用组件的 setRules 方法绑定验证规则：this.$refs.form.setRules(this.rules)，或者在 form 显示后立即调用 setRules （比如 form 在弹窗里面时弹窗显示后，tab 选项卡切换后）。