APP里面的几个注意项
- 在百度地图开放平台申请密匙，在manifest.json App模块配置的地图模块选择百度地图并填入申请到的appkey。
- 页面使用uniapp的map标签，要在地图上面覆盖图片、内容等，使用cover-image、cover-view，因为map是原生组件，覆盖的内容有时不显示，使用v-if控制（这里不能使用v-show），在onload里面设置延迟几百毫秒显示；百度地图在自定义基座和打包才能正常显示，标准基座不会显示；
- 使用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里面的几个注意项
- H5也要在开放平台申请ak，与APP的不可通用；
- H5里面不使用原生组件map;
- 动态引入百度地图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>
微信小程序注意项文章来源：https://www.toymoban.com/news/detail-505126.html
- 虽然百度地图有微信小程序的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校验出现字段在数据库中不存在的错误的可能原因是：文章来源地址https://www.toymoban.com/news/detail-505126.html
- uni-forms-item 加了name 属性，但是在rules中没有设置规则，即使是非必填，只要加了 name 属性，就必须在 rules 中设置规则，否则报错 “字段在数据库中不存在”；
- 使用了 validateFunction 时，必须在 onReady 生命周期调用组件的 setRules 方法绑定验证规则：this.$refs.form.setRules(this.rules)，或者在 form 显示后立即调用 setRules （比如 form 在弹窗里面时弹窗显示后，tab 选项卡切换后）。
到了这里，关于uniapp APP、H5和微信小程序 使用百度地图，H5动态加载百度地图sdk，cover-image图片不显示，标准基座模拟器地图不显示，表单校验字段[‘**‘]在数据库中不存在的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
