uniapp地圖組件(map)使用與遇到的一些問(wèn)題總結(jié)
更新時(shí)間：2022年07月10日 14:22:57 作者：海海吶
uniapp是用vue.js開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)人員只需要編寫(xiě)一套代碼就可以發(fā)布到安卓、iOS、H5和小程序、快應(yīng)用等平臺(tái),下面這篇文章主要給大家介紹了關(guān)于uniapp地圖組件(map)使用與遇到的一些問(wèn)題,需要的朋友可以參考下
前言
這段時(shí)間在開(kāi)發(fā)uniapp的時(shí)候使用到map組件
總結(jié)一下本次在uniapp中使用map遇到的一些問(wèn)題
文章分別是基礎(chǔ) 定位圖標(biāo) 獲取自身經(jīng)緯度 通過(guò)經(jīng)緯度獲取當(dāng)時(shí)城市信息
首先先看成品
廢話(huà)不多說(shuō)，直接開(kāi)始。
首先引入map組件
<template>
<view class="content">
<map style="width: 100%; height: 90vh;" :layer-style='5' :style="{height:mapheight}" :show-location='true' :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
</map>
</view>
</template>
<script>
export default {
data() {
return {
latitude:23.106574, //緯度
longitude:113.324587,//經(jīng)度
scale:13,//縮放級(jí)別
bottomData:false,
marker: [
{
id:0,
latitude: 23.13065,//緯度
longitude: 113.3274,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
// title:'我在這里',//標(biāo)注點(diǎn)名
alpha:0.5, //透明度
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'天寶大廈',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:1234597,
latitude: 23.106574,//緯度
longitude: 113.324587,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
// title:'我在這里',//標(biāo)注點(diǎn)名
alpha:0.5, //透明度
// label:{//為標(biāo)記點(diǎn)旁邊增加標(biāo)簽 //因背景顏色H5不支持
// color:'red',//文本顏色
// },
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'廣州塔',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:2,
latitude: 23.1338,//緯度
longitude: 113.33052,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'德隆大廈',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:3,
latitude: 23.136455,//緯度
longitude: 113.329002,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'羊城國(guó)際商貿(mào)中心',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:4,
latitude: 23.224781,//緯度
longitude: 113.293911,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'天瑞廣場(chǎng)A座',//文本
color:'#ffffff',//文字顏色
fontSize:16,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'12',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:5,
latitude: 23.072726,//緯度
longitude: 113.277921,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'大米和小米兒童康復(fù)(廣州盈豐)中心',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'8',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
],
}
},
onLoad() {
},
computed:{
mapheight(){
let data =''
if(this.bottomData){
if(this.upTop){
data ='50px'
}else{
data ='200px'
}
}else{
data ='90vh'
}
return data
},
coverbottom(){
let data =''
if(this.bottomData){
data ='20rpx'
}else{
data ='100rpx'
}
return data
}
},
methods:{
//地圖點(diǎn)擊事件
markertap(e) {
console.log("===你點(diǎn)擊了標(biāo)記點(diǎn)===",e)
},
//地圖點(diǎn)擊事件
callouttap(e){
console.log('地圖點(diǎn)擊事件',e)
}
}
}
</script>得到的樣式是這樣
這里只給了兩個(gè)回調(diào) 有更多需求可以去uniapp中搜索 map | uni-app官網(wǎng)
定位圖標(biāo)
查了一下官方文檔，發(fā)現(xiàn)官方文檔中并沒(méi)有關(guān)于定位的寫(xiě)法 ，沒(méi)辦法只能自己手寫(xiě)一個(gè)了。
大概是這樣的。
<template>
<view class="page-section page-section-gap map-container">
<map style="width: 100%; height: 90vh;" :layer-style='5' :style="{height:mapheight}" :show-location='true' :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
<cover-view class="cover-view" :style='{bottom:coverbottom}' @click="onControltap">
<cover-image class="cover-image" @click="play" src="@/static/ditudingwei.png"></cover-image>
<cover-view>
定位
</cover-view>
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
latitude:23.106574, //緯度
longitude:113.324587,//經(jīng)度
scale:13,//縮放級(jí)別
bottomData:false,
marker: [
{
id:0,
latitude: 23.13065,//緯度
longitude: 113.3274,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
// title:'我在這里',//標(biāo)注點(diǎn)名
alpha:0.5, //透明度
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'天寶大廈',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:1234597,
latitude: 23.106574,//緯度
longitude: 113.324587,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
// title:'我在這里',//標(biāo)注點(diǎn)名
alpha:0.5, //透明度
// label:{//為標(biāo)記點(diǎn)旁邊增加標(biāo)簽 //因背景顏色H5不支持
// color:'red',//文本顏色
// },
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'廣州塔',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:2,
latitude: 23.1338,//緯度
longitude: 113.33052,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'德隆大廈',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:3,
latitude: 23.136455,//緯度
longitude: 113.329002,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'羊城國(guó)際商貿(mào)中心',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:4,
latitude: 23.224781,//緯度
longitude: 113.293911,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'天瑞廣場(chǎng)A座',//文本
color:'#ffffff',//文字顏色
fontSize:16,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'12',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:5,
latitude: 23.072726,//緯度
longitude: 113.277921,//經(jīng)度
iconPath: '', //顯示的圖標(biāo)
rotate:0, // 旋轉(zhuǎn)度數(shù)
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content:'大米和小米兒童康復(fù)(廣州盈豐)中心',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'8',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
],
}
},
onLoad() {
},
computed:{
mapheight(){
let data =''
if(this.bottomData){
if(this.upTop){
data ='50px'
}else{
data ='200px'
}
}else{
data ='90vh'
}
return data
},
coverbottom(){
let data =''
if(this.bottomData){
data ='20rpx'
}else{
data ='100rpx'
}
return data
}
},
methods:{
//地圖點(diǎn)擊事件
markertap(e) {
console.log("===你點(diǎn)擊了標(biāo)記點(diǎn)===",e)
},
//地圖點(diǎn)擊事件
callouttap(e){
console.log('地圖點(diǎn)擊事件',e)
}
}
}
</script>
<style lang='less' scoped>
.map-container {
position: relative;
overflow: hidden;
.cover-view {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80rpx;
height: 80rpx;
color: #484848;
background-color: #fff;
background-size: 120rpx 120rpx;
background-position: center center;
position: absolute;
bottom: 100rpx;
right: 32rpx;
}
.cover-image{
display: inline-block;
width: 30rpx;
height: 30rpx;
}
}
</style>獲取自身經(jīng)緯度
進(jìn)入頁(yè)面拿到用戶(hù)自身的經(jīng)緯度
在onShow中輸入
onShow() {
uni.getLocation({
geocode:true,
type: 'wgs84',
success: (res) => {
console.log(res,'獲取當(dāng)前位置')
},
address:(res) =>{
console.log('address',res)
}
});
需要打開(kāi)manifest.json
如果從來(lái)沒(méi)配置過(guò)appld請(qǐng)先配置在進(jìn)行操作
然后重新編譯就會(huì)出現(xiàn)
允許之后就可以拿到經(jīng)緯度信息
然后可以將經(jīng)緯度信息賦值給data中的latitude longitude
onShow() {
uni.getLocation({
geocode:true,
type: 'wgs84',
success: (res) => {
console.log(res,'獲取當(dāng)前位置')
this.longitude =res.longitude
this.latitude = res.latitude
},
address:(res) =>{
console.log('address',res)
}
});
},通過(guò)經(jīng)緯度 獲取當(dāng)前城市信息
首先需要進(jìn)入騰訊位置服務(wù) /控制臺(tái)/應(yīng)用管理/我的應(yīng)用/添加key選擇webServiceApi
然后去小程序開(kāi)發(fā)管理/開(kāi)發(fā)設(shè)置/服務(wù)器域名/request合法域名后面新增
https://apis.map.qq.com;
然后下載
https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.1.zip
引入
在ohshow中使用
var qqmapsdk
// 實(shí)例化API核心類(lèi)
qqmapsdk = new QQMapWX({
key: '創(chuàng)建的key'
});
qqmapsdk.reverseGeocoder({
location:{
latitude:this.latitude,
longitude:this.longitude
},
success:(res)=>{
console.log('reverseGeocoder',res)
},
fail:(err)=>{
console.log('reverseGeocoder',err)
}
})這樣就可以通過(guò)自身的經(jīng)緯度獲取到當(dāng)前所在的詳細(xì)信息
更多地圖事件可以查詢(xún)官網(wǎng)騰訊位置服務(wù) - 立足生態(tài)，連接未來(lái)
關(guān)于地圖氣泡彈窗在真機(jī)不顯示或者顯示顏色不明顯的情況，你可以使用在callout中使用padding
這樣就可以顯示顏色了
在uniapp中使用地圖大概就這些
總結(jié)
到此這篇關(guān)于uniapp地圖組件(map)使用與遇到的一些問(wèn)題總結(jié)的文章就介紹到這了,更多相關(guān)uniapp地圖組件(map)使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Webpack中使用環(huán)境變量的各種正確姿勢(shì)
我們?cè)陂_(kāi)發(fā)項(xiàng)目中都會(huì)遇到這種場(chǎng)景,區(qū)分開(kāi)發(fā)環(huán)境、生產(chǎn)環(huán)境、測(cè)試環(huán)境,不同場(chǎng)景請(qǐng)求不同的接口Api,這時(shí)候項(xiàng)目中配置的「環(huán)境變量」就登場(chǎng)啦,這篇文章主要給大家介紹了關(guān)于Webpack中使用環(huán)境變量的各種正確姿勢(shì),需要的朋友可以參考下2021-09-09
JS實(shí)現(xiàn)自動(dòng)定時(shí)切換的簡(jiǎn)潔網(wǎng)頁(yè)選項(xiàng)卡效果
這篇文章主要介紹了JS實(shí)現(xiàn)自動(dòng)定時(shí)切換的簡(jiǎn)潔網(wǎng)頁(yè)選項(xiàng)卡效果,涉及JavaScript基于時(shí)間函數(shù)定時(shí)觸發(fā)遍歷函數(shù)實(shí)現(xiàn)定時(shí)切換功能,需要的朋友可以參考下2015-10-10
如何判斷圖片地址是否失效...2007-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript function函數(shù)種類(lèi)，知識(shí)點(diǎn)很全面，包括普通函數(shù)、匿名函數(shù)、閉包函數(shù)，感興趣的小伙伴們可以參考一下2016-03-03
使用Fuse.js實(shí)現(xiàn)高效的模糊搜索功能
在現(xiàn)代?Web?應(yīng)用程序中,實(shí)現(xiàn)高效的搜索功能是至關(guān)重要的,Fuse.js?是一個(gè)強(qiáng)大的?JavaScript?庫(kù),它提供了靈活的模糊搜索和文本匹配功能,使您能夠輕松實(shí)現(xiàn)出色的搜索體驗(yàn),文中代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-01-01
Bootstrap實(shí)現(xiàn)基于carousel.js框架的輪播圖效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)基于carousel.js框架的輪播圖效果，無(wú)過(guò)渡動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
微信小程序用戶(hù)后臺(tái)定位及錄音授權(quán)及請(qǐng)求示例
這篇文章主要為大家介紹了微信小程序用戶(hù)后臺(tái)定位及錄音授權(quán)及請(qǐng)求示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
關(guān)于Mozilla瀏覽器不支持innerText的解決辦法
在各大瀏覽器中，除Mozilla瀏覽器外，幾乎都支持一個(gè)元素的屬性：innerText。我們可以通過(guò)它來(lái)快速獲取某個(gè)元素的內(nèi)的文本。
2011-01-01 
JS使用for in有序獲取對(duì)象數(shù)據(jù)
這篇文章主要介紹了JS使用for in有序獲取對(duì)象數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05