APP里面的幾個(gè)注意項(xiàng)
- 在百度地圖開放平臺(tái)申請(qǐng)密匙，在manifest.json App模塊配置的地圖模塊選擇百度地圖并填入申請(qǐng)到的appkey。
- 頁(yè)面使用uniapp的map標(biāo)簽，要在地圖上面覆蓋圖片、內(nèi)容等，使用cover-image、cover-view，因?yàn)閙ap是原生組件，覆蓋的內(nèi)容有時(shí)不顯示，使用v-if控制（這里不能使用v-show），在onload里面設(shè)置延遲幾百毫秒顯示；百度地圖在自定義基座和打包才能正常顯示，標(biāo)準(zhǔn)基座不會(huì)顯示；
- 使用uni.getLocation({})獲取定位，type傳gcj02，在自定義基座中，定位獲取到的坐標(biāo)不用轉(zhuǎn)為百度就是正常，但是打包后需要轉(zhuǎn)為百度marker才能準(zhǔn)確標(biāo)記；
<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要轉(zhuǎn)成百度坐標(biāo), gcj02tobd09為事先定義好的經(jīng)緯度轉(zhuǎn)換方法
let formatLonlat = gcj02tobd09(res.longitude, res.latitude)
self.latitude = formatLonlat.latitude
self.longitude = formatLonlat.longitude
// 獲取定位后可進(jìn)行其他操作
},
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里面的幾個(gè)注意項(xiàng)
- H5也要在開放平臺(tái)申請(qǐng)ak，與APP的不可通用；
- H5里面不使用原生組件map;
- 動(dòng)態(tài)引入百度地圖sdk，并使用地圖加載成功后的回調(diào)函數(shù)進(jìn)行其他操作，否則地圖沒加載成功就使用new BMap()等方法會(huì)報(bào)錯(cuò)；
<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() {
// 移動(dòng)端H5使用v3.0版本比較好，h5的ak是申請(qǐng)的web平臺(tái)的ak與app的ak是不一樣的，initialize為地圖加載成功的回調(diào)
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); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
// 自定義marker圖標(biāo)
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()定位，也可以使用百度地圖里面的獲取定位，使用百度地圖里面的獲取定位不需要進(jìn)行經(jīng)緯度轉(zhuǎn)換
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) // 平滑移動(dòng)
// 獲取定位成功后進(jìn)行其他操作
}else{
uni.showToast({
title: '定位失敗，請(qǐng)稍后重試！',
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>
微信小程序注意項(xiàng)文章來源：http://www.zghlxwxcb.cn/news/detail-505126.html
- 雖然百度地圖有微信小程序的api，但并沒有用，因?yàn)樾〕绦蚋静荒苤苯邮褂冒俣鹊貓D，只能采用web-view方式引入外鏈嵌入，其實(shí)uniapp H5的百度地圖實(shí)現(xiàn)了，將H5地圖頁(yè)面地址賦值web-view的src就可以，在小程序里面配置業(yè)務(wù)域名即可;
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
// webUrl是H5頁(yè)面的地圖
<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校驗(yàn)出現(xiàn)字段在數(shù)據(jù)庫(kù)中不存在的錯(cuò)誤的可能原因是：文章來源地址http://www.zghlxwxcb.cn/news/detail-505126.html
- uni-forms-item 加了name 屬性，但是在rules中沒有設(shè)置規(guī)則，即使是非必填，只要加了 name 屬性，就必須在 rules 中設(shè)置規(guī)則，否則報(bào)錯(cuò) “字段在數(shù)據(jù)庫(kù)中不存在”；
- 使用了 validateFunction 時(shí)，必須在 onReady 生命周期調(diào)用組件的 setRules 方法綁定驗(yàn)證規(guī)則：this.$refs.form.setRules(this.rules)，或者在 form 顯示后立即調(diào)用 setRules （比如 form 在彈窗里面時(shí)彈窗顯示后，tab 選項(xiàng)卡切換后）。
到了這里，關(guān)于uniapp APP、H5和微信小程序 使用百度地圖，H5動(dòng)態(tài)加載百度地圖sdk，cover-image圖片不顯示，標(biāo)準(zhǔn)基座模擬器地圖不顯示，表單校驗(yàn)字段[‘**‘]在數(shù)據(jù)庫(kù)中不存在的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
