小程序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组件的时候是在微信开发工具的模拟器上预览的 ...
随机推荐
- Internet 网络协议族
1.linux目前支持多种协议族,每个协议族用一个net_porto_family结构实例来表示,在初始化时,会调用sock_register()函数初始化注册到net_families[NPROTO ...
- gcc编译链接用到的环境变量
PATH ---- 可执行程序寻找路径 C_INCLUDE_PATH ---- 头文件寻找路径 CPLUS_INCLUDE_PATH --- g++ 头文件路径 LD_LIBRARY_PATH ...
- Linux 笔记2
1.linux的usr目录相当于windows下Program Files目录,存放的应用程序2.在centos 6.4按ctrl+alt+F2切换到命令行,ctr+alt+F8切换到图像界面,ctr ...
- ceph的pg的分布的快速查看
前言 本篇的内容实际上是另外一篇文章的字篇章,在另外一篇文章当中,将会对crush的分布的调整的做一次总结,用比较简单的方式来展示各种crush的区别 在做这个工作过程中,为了更好的能展示出效果,就有 ...
- 分布式监控系统之Zabbix宏、模板和自定义item
前文我们聊了下zabbix的基础使用,包括主机的添加.监控项.触发器.action以及告警通知的配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/140073 ...
- ASP.NET Core管道详解[2]: HttpContext本质论
ASP.NET Core请求处理管道由一个服务器和一组有序排列的中间件构成,所有中间件针对请求的处理都在通过HttpContext对象表示的上下文中进行.由于应用程序总是利用服务器来完成对请求的接收和 ...
- python菜鸟教程学习5: python运算符
算术运算符: 整除符号//:向下取接近商的整数 加+ 减- 乘* 除/ 取余% 幂** 比较运算符: 等于== 不等于!= 大于> 小于< 大于等于>= 小于等于<= 赋值运算 ...
- mysql官网下载yum
1.进入mysql官网 2.下载页面最下方的社区下载 3.找到yum库 下载: 7.安装.rpm[root@test tools]# rpm -ivh mysql80-community-releas ...
- 阿里面试官:小伙子,给我说一下Spring 和 Spring Boot 的区别吧
前言 对于 Spring和 SpringBoot到底有什么区别,我听到了很多答案,刚开始迈入学习 SpringBoot的我当时也是一头雾水,随着经验的积累.我慢慢理解了这两个框架到底有什么区别,相信对 ...
- 装了IDM后看网页有时会自动弹出下载怎么办
我们在安装了IDM之后,浏览一些网站时可能会自动弹文件下载窗口,但有时内容并非我们要下载的.对此类自动弹下载对话框的情况,操作者可进行自定义设置.不仅可通过设置文件格式来禁止自动弹窗,也可通过设置特定 ...