小程序map地图点击makert放大效果和点击放大地图
WXML文件和JS文件代码在下方
<view class='map'>
<map
id="map"
longitude="{{location.lng}}"
latitude="{{location.lat}}"
scale="{{scaleCount}}"
markers="{{markers}}"
bindmarkertap="markertap"
></map>
</view>
Page({
/**
* 页面的初始数据
*/
data: {
scaleCount:12,
markers: [],
location: "",
},
markertap: function (e) {
var _this = this;
var markerId = e.markerId;
var model = _this.data.mapData.filter( t=> t.pileMapId == markerId)[0];
var markerIndex = _this.data.markers.findIndex( t=> t.id == markerId);
//这里本人设置了最大不能超过14的缩放
if (_this.data.scaleCount >= 12 && _this.data.scaleCount < 14) {
var location = {lat:model.latitude,lng:model.longitude};
_this.setData({
location:location
}); //这里是设置点击makert的坐标,定到这里去
_this.setData({
scaleCount:_this.data.scaleCount+1 //每次缩放+1
})
return;//如果超过就return
}
//这里是设置点击makert点击图片变大突出效果
var markersWidth= `markers[${markerIndex}].width`;
var markersHeight= `markers[${markerIndex}].height`;
_this.setData({
[markersWidth]: 38,
[markersHeight]: 38
})
// wx.showToast({title: '正在获取信息', icon: 'loading', duration: 10000});
// wx.hideToast();
},
})
这个是自己工作上的东西,做个记录,希望可以帮助有需要的人
小程序map地图点击makert放大效果和点击放大地图的更多相关文章
- 微信小程序map地图的一些使用注意事项
1.小程序组件map,在微信7.0.4以上(不包括7.0.4)层级问题官方已作更新,可在map上随意添加任何标签使用z-index即可:微信7.0.4版本以下map组件层级默认是最高的,只能使用官方提 ...
- 小程序map地图多点定位
最近需求有一个类似共享单车查看附近单车的功能,看了看小程序map api对多点定位显示描述的不怎么清晰.显示定位数组添加多个时就不显示了.踩了几个坑写了几个方法.最终弄出来了.有问题建议欢迎留言. h ...
- 小程序map地图上显示多个marker
wxml <map id="myMap" style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;" ...
- 微信小程序----map组件实现检索【定位位置】周边的POI
效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="m ...
- 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...
- 百度小程序-map组件定位
给客户开发一个百度小程序,有个地图定位显示.百度小程序内置的api地图是不准的,通过百度一下,查询到坐标偏移算法公式,自己项目中使用,手机测试坐标已经正常显示! 经纬度,通过百度坐标拾取器拾取到! . ...
- 小程序 map组件问题 cover-view问题
使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canva ...
- Taro开发小程序移动地图固定中间获取地址
效果图如下: 绿色地标固定在中间,移动地图的时候获取对应信息. 先定义map. <Map className="location" id={location} latitud ...
- 微信小程序map组件z-index的层级问题
说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的.如下情景:刚开始接入map组件的时候是在微信开发工具的模拟器上预览的 ...
随机推荐
- CSS3之径向渐变
设置最终形状参数: ellipse circle 设置长半轴和短半轴 设置椭圆对称中心 设置色标 输出代码: radial-gradient(circle closest-side at ce ...
- 对App应用架构搭建的一些思考
当下随着App开发技术的越来越成熟,多人协同开发必不可少,一个团队中每个人的代码风格.技术栈都存在差异,因此统一一套成熟的开发架构必不可少,可以提高开发效率.统一代码风格.为项目维护提供便利. 当下A ...
- 自行实现的jar包中,日志库的适配实现
日常情况下,我们自己都会自行实现一些基础的jar包,如dao包.service包或一些其他完成特定功能的jar包.如果没有一套调试日志信息,出现问题时想查找问题非常不方便.可能大多数小伙伴都会有自 ...
- 网络拓扑实例之VRRP负载分担(四)
组网图形 VRRP负载分担简介 负载分担方式是指多台设备同时承担业务,因此负载分担方式需要两个或者两个以上的虚拟路由器,每个虚拟路由器都包括一个Master路由器和若干个Backup路由器,各虚拟路 ...
- Codeforces375D Tree and Queries
dsu on tree 题目链接 点我跳转 题目大意 给定一棵 \(n\) 个节点的树,根节点为 \(1\).每个节点上有一个颜色 \(c_i\) \(m\) 次询问. 每次询问给出 \(u\) \( ...
- Beyond Compare-这款检查图片工具真的绝了!
无论是出去旅游,还是参加聚会,在朋友圈分享美美的图片,已经成为了很多都市人的日常.在分享图片前,大多数人都会选择使用滤镜.风格等功能对照片进行一定的美化.但有时候美化的程度比较轻微,连修图的人都无法判 ...
- MathType如何对齐公式
作为强大的公式编辑器,MathType为我们的学习.工作带来了极大的便利.比如在写论文时,有了它,就可以轻松就把论文里的公式码完:老师在编写试卷时,利用它,可以快速编写出一份试卷.那么在编写公式时,也 ...
- Folx种子下载器怎么管理下载任务
对于喜欢追剧的用户来说,同时下载好几部剧是司空见惯的事情.但有时候,有些剧比较好看或者热度比较高时,就会希望优先将其下载下来. 对于使用Folx种子下载器的用户来说,可以结合使用下载列表+最大活动数的 ...
- Guitar Pro7应该怎么添加音色
众所周知,音色是乐器的灵魂所在.音色的好坏,直接影响到了整首曲子的质量.Guitar Pro7中,用户不仅可以切换乐器模拟器,还能分别对其进行音色调整.对于新手而言,Guitar Pro7是一款非常合 ...
- 数据丢失如何恢复?EasyRecovery帮你快速实现
在日常使用电脑时,我们经常会遇到误删文件的情况,若文件还未被彻底删除,我们还可以通过电脑中的回收站将其恢复,但若是回收站都被清空的话,想要恢复文件就变得比较困难了,而EasyRecovery可以很好的 ...