uniapp中map的markertap方法及使用

uniapp中map的markertap方法及使用

项目需求:
我们在做地图的时候经常会做撒点功能,当我们点击这个点的时候,想要获取这个点的信息,那么我们就可以使用markertap属性获取这个点的信息,下面我们来上代码

markertap(e){
	console.log(e)
	var clickmarkerId = e.mp.detail.markerId
	//根据e.mp.detail.markerId跟撒点的id进行判断,如果相等就进行赋值
	for(var i=0;i<this.marker.length;i++){
		if(this.marker[i].id == clickmarkerId){
			this.sendlongitude = this.marker[i].longitude
			this.sendlatitude = this.marker[i].latitude
			this.sendname = this.marker[i].name
			this.sendaddress = this.marker[i].address
		}
	}
},
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,它允许开发者编写一次代码,然后发布到 iOS、Android、Web(包括微信小程序)等多个平台。在 uni-app 使用地图组件进行定位到指定点的操作,一般会用到 `<map>` 组件来展示地图,以及使用相关API来实现定位功能。 具体步骤如下: 1. 首先,在页面上引入 `<map>` 组件,并在其设置 `longitude`(经度)和 `latitude`(纬度)属性,这两个属性决定了地图心点的位置。 ```html <template> <view> <map id="map" longitude="你的目标经度" latitude="你的目标纬度" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" > </map> </view> </template> ``` 2. 通过 `uni.getLocation` API 获取用户当前位置,并可以设置定位模式及精度。 ```javascript export default { data() { return { // 其他数据属性 location: null, markers: [] }; }, methods: { // 获取用户当前位置 getLocation() { uni.getLocation({ type: 'gcj02', // 返回可以用于uni.openLocation的经纬度 success: (res) => { console.log(res); this.location = { latitude: res.latitude, longitude: res.longitude }; this.markers = [{ id: 0, latitude: res.latitude, longitude: res.longitude, name: '当前位置' }]; } }); } }, onLoad() { this.getLocation(); } }; ``` 3. 使用 `<map>` 组件的 `controls` 属性来添加自定义按钮,`bindcontroltap` 事件来处理按钮的点击事件,从而实现更多地图操作。 4. 注意,如果你要展示的是国外地点,可能需要将经纬度转换为对应的坐标系(如GCJ-02或BD-09),因为国大陆地区对地图数据进行了加密。 请根据实际情况在你的代码替换目标经纬度和相关参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有思想的前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值