uniapp地圖組件(map)使用與遇到的一些問題總結
前言
這段時間在開發uniapp的時候使用到map組件
總結一下本次在uniapp中使用map遇到的一些問題
文章分別是基礎 定位圖標 獲取自身經緯度 通過經緯度獲取當時城市信息
首先先看成品
廢話不多說，直接開始。
首先引入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,//經度
scale:13,//縮放級別
bottomData:false,
marker: [
{
id:0,
latitude: 23.13065,//緯度
longitude: 113.3274,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
// title:'我在這裡',//標註點名
alpha:0.5, //透明度
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'天寶大廈',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:1234597,
latitude: 23.106574,//緯度
longitude: 113.324587,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
// title:'我在這裡',//標註點名
alpha:0.5, //透明度
// label:{//為標記點旁邊增加標簽 //因背景顏色H5不支持
// color:'red',//文本顏色
// },
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'廣州塔',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:2,
latitude: 23.1338,//緯度
longitude: 113.33052,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'德隆大廈',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:3,
latitude: 23.136455,//緯度
longitude: 113.329002,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'羊城國際商貿中心',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:4,
latitude: 23.224781,//緯度
longitude: 113.293911,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'天瑞廣場A座',//文本
color:'#ffffff',//文字顏色
fontSize:16,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'12',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:5,
latitude: 23.072726,//緯度
longitude: 113.277921,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'大米和小米兒童康復(廣州盈豐)中心',//文本
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:{
//地圖點擊事件
markertap(e) {
console.log("===你點擊瞭標記點===",e)
},
//地圖點擊事件
callouttap(e){
console.log('地圖點擊事件',e)
}
}
}
</script>
得到的樣式是這樣
這裡隻給瞭兩個回調 有更多需求可以去uniapp中搜索 map | uni-app官網
定位圖標
查瞭一下官方文檔，發現官方文檔中並沒有關於定位的寫法 ，沒辦法隻能自己手寫一個瞭。
大概是這樣的。
<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,//經度
scale:13,//縮放級別
bottomData:false,
marker: [
{
id:0,
latitude: 23.13065,//緯度
longitude: 113.3274,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
// title:'我在這裡',//標註點名
alpha:0.5, //透明度
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'天寶大廈',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:1234597,
latitude: 23.106574,//緯度
longitude: 113.324587,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
// title:'我在這裡',//標註點名
alpha:0.5, //透明度
// label:{//為標記點旁邊增加標簽 //因背景顏色H5不支持
// color:'red',//文本顏色
// },
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'廣州塔',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:2,
latitude: 23.1338,//緯度
longitude: 113.33052,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'德隆大廈',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:3,
latitude: 23.136455,//緯度
longitude: 113.329002,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'羊城國際商貿中心',//文本
color:'#ffffff',//文字顏色
fontSize:14,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'10',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:4,
latitude: 23.224781,//緯度
longitude: 113.293911,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'天瑞廣場A座',//文本
color:'#ffffff',//文字顏色
fontSize:16,//文本大小
borderRadius:15,//邊框圓角
borderWidth:'12',
bgColor:'#e51860',//背景顏色
display:'ALWAYS',//常顯
},
},
{
id:5,
latitude: 23.072726,//緯度
longitude: 113.277921,//經度
iconPath: '', //顯示的圖標
rotate:0, // 旋轉度數
width:20, //寬
height:30, //高
alpha:0.5, //透明度
callout:{//自定義標記點上方的氣泡窗口 點擊有效
content:'大米和小米兒童康復(廣州盈豐)中心',//文本
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:{
//地圖點擊事件
markertap(e) {
console.log("===你點擊瞭標記點===",e)
},
//地圖點擊事件
callouttap(e){
console.log('地圖點擊事件',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>
獲取自身經緯度
進入頁面拿到用戶自身的經緯度
在onShow中輸入
onShow() {
uni.getLocation({
geocode:true,
type: 'wgs84',
success: (res) => {
console.log(res,'獲取當前位置')
},
address:(res) =>{
console.log('address',res)
}
});
需要打開manifest.json
如果從來沒配置過appld請先配置在進行操作
然後重新編譯就會出現
允許之後就可以拿到經緯度信息
然後可以將經緯度信息賦值給data中的latitude longitude
onShow() {
uni.getLocation({
geocode:true,
type: 'wgs84',
success: (res) => {
console.log(res,'獲取當前位置')
this.longitude =res.longitude
this.latitude = res.latitude
},
address:(res) =>{
console.log('address',res)
}
});
},
通過經緯度 獲取當前城市信息
首先需要進入騰訊位置服務 /控制臺/應用管理/我的應用/添加key選擇webServiceApi
然後去小程序開發管理/開發設置/服務器域名/request合法域名後面新增
https://apis.map.qq.com;
然後下載
https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.1.zip
引入
在ohshow中使用
var qqmapsdk
// 實例化API核心類
qqmapsdk = new QQMapWX({
key: '創建的key'
});
qqmapsdk.reverseGeocoder({
location:{
latitude:this.latitude,
longitude:this.longitude
},
success:(res)=>{
console.log('reverseGeocoder',res)
},
fail:(err)=>{
console.log('reverseGeocoder',err)
}
})
這樣就可以通過自身的經緯度獲取到當前所在的詳細信息
更多地圖事件可以查詢官網騰訊位置服務 – 立足生態，連接未來
關於地圖氣泡彈窗在真機不顯示或者顯示顏色不明顯的情況，你可以使用在callout中使用padding
這樣就可以顯示顏色瞭
在uniapp中使用地圖大概就這些
總結
到此這篇關於uniapp地圖組件(map)使用與遇到的一些問題總結的文章就介紹到這瞭,更多相關uniapp地圖組件(map)使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！