uniapp地图组件map怎么使用

首先引入map组件

<template>    <view class="content">      <map  :layer-style='5'  : :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怎么使用

定位图标

查了一下官方文档,发现官方文档中并没有关于定位的写法 ,没办法只能自己手写一个了。

大概是这样的。

uniapp地图组件map怎么使用

<template>		<view class="page-section page-section-gap map-container">					<map  :layer-style='5'  : :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)								}				});

uniapp地图组件map怎么使用

需要打开manifest.json

uniapp地图组件map怎么使用

如果从来没配置过appld请先配置在进行操作

uniapp地图组件map怎么使用

uniapp地图组件map怎么使用

然后重新编译就会出现

uniapp地图组件map怎么使用

允许之后就可以拿到经纬度信息

uniapp地图组件map怎么使用

然后可以将经纬度信息赋值给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

uniapp地图组件map怎么使用

然后去小程序开发管理/开发设置/服务器域名/request合法域名后面新增

https://apis.map.qq.com;

然后下载

https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.1.zip

引入

uniapp地图组件map怎么使用

在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)			}		})

关于“uniapp地图组件map怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“uniapp地图组件map怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

文章标题:uniapp地图组件map怎么使用,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/27234

(1)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月20日 上午12:10
下一篇 2022年9月20日 上午12:11

相关推荐

  • win7如何清理微信和qq缓存

    win7清理微信和qq缓存的方法 微信清理: 1、打开微信,点击左侧下方三条横杠,打开后点击“设置” 2、 点击“通用设置” 3、点击右侧的“存储空间管理” 4、找到缓存这里,点击对应的管理和清理就可以了。 QQ缓存清理: 1、打开QQ主面板,点击左下方三条杠,点击“设置” 2、点击左边的“文件管理…

    2022年9月24日
    50100
  • windows KB4520010更新了哪些内容

    KB4520010主要更新方面: – 更新以提高使用 Internet Explorer 和 Microsoft Edge 时的安全性。 – 用于验证用户名和密码的更新。 – 用于存储和管理文件的更新。 KB4520010改进修补程序: 解决了安全公告 CVE-2…

    2022年9月1日
    30900
  • 如何搭建zabbix监控及邮件报警

    一、zabbix 1.1 简介 zabbix 是一款开源的功能强大的分布式监控系统,一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。 zabbix server可以通过SNMP,zabbix agent,ping,端口监视等方法提供对远程服务器/网络状态的监视。 zab…

    2022年9月18日
    93000
  • idaPro如何分析app解密lua脚本

    通过前面idaPro调试或hook,我们可以获取到xxtea解密key,对于sign我们可以直接打开原文件: 可以看到sign值:byds。所以,我们可以同过xxtea解密工具(可从GitHub上下源码自己编译)试着解密: 以index.luac为例,我们看index.luac解密前后变化: 我们看…

    2022年9月21日
    73500
  • word页眉页脚如何删除

    word页眉页脚删除方法 一、Word 删除页眉 1.双击页眉进入编辑状态,单击“页眉”图标,选择“删除页眉”,则文档的所有页眉被删除: 2、页眉虽然被删除了,但页眉横线却还在,横线的删除方法将在下文分享。 二、Word 删除页脚 双击页脚进入编辑状态,单击“页脚”图标,选择“删除页脚”,则页脚被删…

    2022年9月2日
    5.5K00
  • windows 0xc00000f4蓝屏如何解决

    0xc00000f4蓝屏解决方法: 方法一: 1、一般来说,内存读取错误的情况只要重启一下电脑就可以解决了。 2、如果重启没解决,那么再次重启,然后在开机时按下“F8”进入如下界面。 3、接着选择其中的“安全模式”进入。 4、进入安全模式后,卸载最近一次电脑使用时安装的驱动和软件,再重启电脑即可。 …

    2022年9月15日
    43200
  • Redis过期键删除策略的原理是什么

    Redis服务器实际使用的是惰性删除和定期删除两种策略:通过配合使用这两种删除策略,服务器可以很好地在合理使用CPU时间和避免浪费内存空间之间取得平衡。 惰性删除 惰性删除策略对CPU时间来说是最友好的:程序只会在取出键时才对键进行过期检查,这可以保证删除过期键的操作只会在非做不可的情况下进行,并且…

    2022年9月2日
    55500
  • Web Application核心防御机制是什么

    为防止恶意输入,应用程序实施了大量的安全机制,而这些安全机制在概念上都具有相似性。 这些安全机制由以下几个方面组成: 1、处理用户访问web应用程序的数据与功能(防止未授权访问) 2、处理用户对web应用程序功能输入的数据(防止构造恶意数据) 3、应对攻击(处理预料外的报错、自动阻止明显的攻击、自动…

    2022年9月24日
    43900
  • Redis之sentinel哨兵集群怎么部署

    一、Redis sentinel哨兵集群概述 (1)Redis哨兵概述 *Sentinel 哨兵:这是一个分布式系统,该进程是用于监控Redis集群中Master主服务器的工作状态,在Master主服务器发生故障时,可以实现Master和Slave服务器的秒级切换,保证系统有一个Master主服务器…

    2022年9月10日
    66800
  • Python遗传算法Geatpy工具箱怎么用

    一、 什么是遗传算法? 遗传算法是仿真生物遗传学和自然选择机理,通过人工方式所构造的一类搜索算法,从某种程度上说遗传算法是对生物进化过程进行的数学方式仿真。生物种群的生存过程普遍遵循达尔文进化准则,群体中的个体根据对环境的适应能力而被大自然所选择或淘汰。进化过程的结果反映在个体的结构上,其染色体包含…

    2022年9月10日
    89100
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部