小程序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组件的时候是在微信开发工具的模拟器上预览的 ...
随机推荐
- sk_buff结构--转载
套接字缓存之sk_buff结构 https://www.cnblogs.com/wanpengcoder/p/7529486.html 来此此处 sk_buff结构用来描述已接收或者待发送的数据报文信 ...
- Android状态栏与布局重叠解决方案
问题起因: 同组的同事将项目全局设置成了沉浸式,对于我这个半路过来开发的人 可真是头疼呵~ 没办法,那就我自己添加一个头吧.也可以在布局中取消沉浸式,不过我这个是在fragment中,为了不修改之前的 ...
- python3中的os.path模块
os.path模块主要用于获取文件的属性,这里对该模块中一些常用的函数做些记录. os.abspath(path):获取文件的绝对路径.这里path指的是路径,例如我这里输入"data.cs ...
- UNP——第二章,常见协议概述
1.为什么要了解协议 程序员与协议合作,完成应用. 了解协议是为了了解协议完成了什么,提供了什么服务,自己还应该做什么. 2.从协议的角度,套接字是什么 套接字是协议的接口, IP套接字,代表可使用I ...
- Java的注释-标识符和关键字
1.Java注释 单行注释 多行注释 文档注释 代码示例 public class Hello{ public static void main(String[] args) { ...
- Ceph的Mon数据重新构建工具
关于mon的数据的问题,一般正常情况下都是配置的3个mon的,但是还是有人会担心 Mon 万一三个同时都挂掉了怎么办,那么集群所有的数据是不是都丢了,关于后台真实数据恢复,有去后台取对象,然后一个个拼 ...
- RESTFul服务开发必备的一款IDEA插件!用了就离不开了
我们经常谈 RESTful Web 服务开发,但是我发现很多人实际就根本不懂这个概念.只是听着大家都这么说,也就跟着一起说了,哈哈哈! 因此,在开始推荐这个IDEA插件之前,非常有必要花一小会时间简单 ...
- Java 的反射机制你了解多少?
不知道多少次听说过了Java反射机制的使用,比如:Spring 框架如何实例化IoC容器中的Bean,编码过程中如何动态的清理对象中的字段信息等等.工作中只是听说.看同事们编码实践,但是自己却只是概念 ...
- Guitar Pro小课堂之如何演奏刮弦
每当我们听到吉他现场演出的时候,看到吉他手在激烈的刮弦时,都觉得很酷,非常有感染力.刮弦在我们弹吉他或编曲时,会经常用到,虽然时间很短,但会为你加分不少. 那么我们应该如何演奏刮弦呢,我们先用E5和弦 ...
- 「CF578F」 Mirror Box
description CF578F solution 考虑转化题目的要求 1.对于任意一条边,都存在一条从界垂直射入的光线,经过反射穿过这条边. 当图中有环时,环内的边一定不满足条件,而在不存在环时 ...