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放大效果和点击放大地图的更多相关文章

  1. 微信小程序map地图的一些使用注意事项

    1.小程序组件map,在微信7.0.4以上(不包括7.0.4)层级问题官方已作更新,可在map上随意添加任何标签使用z-index即可:微信7.0.4版本以下map组件层级默认是最高的,只能使用官方提 ...

  2. 小程序map地图多点定位

    最近需求有一个类似共享单车查看附近单车的功能,看了看小程序map api对多点定位显示描述的不怎么清晰.显示定位数组添加多个时就不显示了.踩了几个坑写了几个方法.最终弄出来了.有问题建议欢迎留言. h ...

  3. 小程序map地图上显示多个marker

    wxml <map id="myMap" style="width: {{mapWidth}}rpx; height: {{mapHeight}}rpx;" ...

  4. 微信小程序----map组件实现检索【定位位置】周边的POI

    效果图 实现方法 地图采用微信小程序提供的map组件: 周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据. WXML <view class="m ...

  5. 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图

    如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...

  6. 百度小程序-map组件定位

    给客户开发一个百度小程序,有个地图定位显示.百度小程序内置的api地图是不准的,通过百度一下,查询到坐标偏移算法公式,自己项目中使用,手机测试坐标已经正常显示! 经纬度,通过百度坐标拾取器拾取到! . ...

  7. 小程序 map组件问题 cover-view问题

    使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canva ...

  8. Taro开发小程序移动地图固定中间获取地址

    效果图如下: 绿色地标固定在中间,移动地图的时候获取对应信息. 先定义map. <Map className="location" id={location} latitud ...

  9. 微信小程序map组件z-index的层级问题

    说起微信小程序的map组件,可以说是良心之作了,一个组件解决了所以接入地图的所有麻烦,但是在实际小程序的试用过程中还是存在点问题的.如下情景:刚开始接入map组件的时候是在微信开发工具的模拟器上预览的 ...

随机推荐

  1. [MIT6.006] 13. Breadth-First Search (BFS) 广度优先搜索

    一.图 在正式进入广度优先搜索的学习前,先了解下图: 图分为有向图和无向图,由点vertices和边edges构成.图有很多应用,例如:网页爬取,社交网络,网络传播,垃圾回收,模型检查,数学推断检查和 ...

  2. 搭建vue-cli4.0项目

      ① Vue CLI的包名称由 vue-cli 改成了 @vue/cli. 如果已经全局安装了旧版本的 vue-cli(1.x或2.x), 你需要先通过 npm uninstall vue-cli ...

  3. linux netfilter nat2

    linux netfilter nat1 后面在上传

  4. 部署Dotnet Core应用到Kubernetes(二)

    前一篇文章,概念性地介绍了K8s的一些基础组件,如Pod.部署和服务.这篇文章,我打算写写如何使用YAML清单定义和配置这些资源.   实际上,在K8s集群中创建对象有几种方式 - 命令,或声明.两种 ...

  5. 配置内网访问的TV

    前言 通过内网模式访问tv远程机器 方法 云主机配置 一台云主机,云主机申请两个公网IP 云主机启动两个frps进程绑定到两个内网的ip 客户端配置 远程一台linux跳板机运行frpc,启动两个进程 ...

  6. 5、Spring Boot缓存

    1.JSR107 Java Caching定义了5个核心接口,分别是CachingProvider.CacheManager.Cache.Entry.Expiry. CachingProvider:定 ...

  7. Mac 安装并破解热部署插件JRebel详细教程

    热部署插件 JRebel 非常高效的解决了在IDEA中对 Java 代码修改重启Tomcat的效率问题,这样大大降低了项目开发的时间,不用重启即可重新编译修改过的Java代码! (1)IDEA中安装热 ...

  8. oss文件上传删除(批量删除)处理

    博主用的是阿里云的oss 首先先在阿里云下载安装sdk,相关的sdk下载请自行到阿里云下载 文档地址   https://help.aliyun.com/document_detail/85580.h ...

  9. 使用Camtasia制作魔性抖肩舞视频

    最近一首风魔各大视频网站的魔性舞蹈又来袭了!这首充满魔性节奏的舞蹈就是抖肩舞了,为了将我热爱的抖肩舞视频分享给大家,我必须使用Camtasia教程录制(Windows系统)软件来制作一个魔性抖肩舞视频 ...

  10. 刚安装好的MathType怎么使用

    对于刚接触公式编辑器的新手来说,难免会存在很多疑问:如何使用刚安装好的Word公式编辑器?安装好公式编辑器之后,我们在哪里找到这个工具呢?下面就针对大家的这些疑问,来给大家介绍下首次使用MathTyp ...