uniapp地圖元件(map)使用與遇到的一些問題總結

2022-07-10 18:01:13

前言

這段時間在開發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中使用地圖大概就這些