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

相关推荐

  • MySQL死锁怎么检测和避免

    在我们使用锁的时候,有一个问题是需要注意和避免的,我们知道,排它锁有互斥的特性。一个事务或者说一个线程持有锁的时候,会阻止其他的线程获取锁,这个时候会造成阻塞等待,如果循环等待,会有可能造成死锁。 这个问题我们需要从几个方面来分析,一个是锁为什么不释放,第二个是被阻塞了怎么办,第三个死锁是怎么发生的…

    2022年9月10日
    90500
  • mysql有什么权限表

    mysql的权限表有:1、user表,用来记录允许连接到服务器的账号信息,该表里启用的所有权限都是全局级的,适用于所有数据库;2、db表,存储了用户对某个数据库的操作权限;3、tables_priv表,用来对单个表进行权限设置;4、columns_priv表,用来对单个数据列进行权限设置;5、pro…

    2022年9月19日
    58900
  • 加密在网络上有哪些作用

    加密在网络上的作用就是防止有用或私有化信息在网络上被拦截和窃取。加密后的口令即使被黑客获得也是不可读的,加密后的标书没有收件人的私钥也就无法解开,标书成为一大堆无任何实际意义的乱码,这样即使被盗也不会有损失;所以加密对于保护文件是相当的重要。 本教程操作环境:windows7系统、Dell G3电脑…

    2022年9月13日
    42400
  • windows deepl如何注册

    deepl注册的方法 1、登陆官方网页,点击右上角的登陆,进行注册。 2、亚洲仅有“日本”可以注册,也就是说中国的无法注册。 3、但不要着急,我们这个时候点击日本,进入到页面之后,可以看到有一个30天的试用。 以上就是关于“windows deepl如何注册”这篇文章的内容,相信大家都有了一定的了解…

    2022年9月26日
    1.1K00
  • windows会声会影x5如何导出视频

    会声会影x5导出视频的方法 1、我们可以在界面的左上角或者上方找到“分享”按钮,点击它。 2、然后选择想要导出的方式,一般我们选择“创建视频文件”。 3、然后我们点击如图“创建视频文件”可以选择视频的格式。 4、这里我们选择mp4格式(大家可以根据需要自行选择),然后还可以选择更细致的格式。 5、选…

    2022年9月15日
    40400
  • html中的from标签的作用介绍

    在html中,from标签用于创建供用户输入的HTML表单(表单域),以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器;语法“<form action=”提交地址” method=”提交方式” name=”表单名称&…

    2022年9月16日
    1.7K00
  • ECharts如何打印数据

    ECharts打印数据的方法 一、 首先我们要做的,就是在Echarts图标上方定义一个img 1 <!–startprint–>2 <img src=”” id=”printImg” style=&#8221…

    2022年9月26日
    48100
  • SQL注入语法有哪些

    仅供参考学习使用。 SQL注入语法 报错注入 updatexml(1,concat(0x7e,(select database()),0x7e),1)–+extractvalue(1,concat(0x7e,(select database()),0x7e),1)–+select count(*…

    2022年9月6日
    55300
  • js前端如何实现图片文本文件预览功能

    实现方案 找了网上的实现方案,效果看起来不错,放在下面的表格里,里面有一些是可以直接通过npm在vue中引入使用。 文档格式 老的开源组件 替代开源组件 word(docx) mammoth docx-preview(npm) powerpoint(pptx) pptxjs pptxjs改造开发 e…

    2022年9月5日
    1.2K00
  • 如何进行Apache HTTP组件提权漏洞利用过程深度分析

    Apache HTTP 被发现存在本地提权漏洞(CVE-2019-0211),漏洞作者在名列前茅时间就给出了WriteUp和漏洞EXP,阿尔法实验室也对EXP进行了深入分析,在此将分析的笔记整理分享出来,希望对大家理解该漏洞有所帮助。下面内容主要按着EXP的执行步骤一步步讲解,同时详细解释了利用过程…

    2022年9月15日
    60100
站长微信
站长微信
电话联系

400-800-1024

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

分享本页
返回顶部