zoukankan      html  css  js  c++  java
  • 小程序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();
      },
    
    })
    

    这个是自己工作上的东西,做个记录,希望可以帮助有需要的人

  • 相关阅读:
    Python2-列表
    C#1-变量和表达式
    Python1-变量
    grep输出带有颜色设置
    ftp服务器的安装与使用
    慕课网-哒哒租车系统
    ulimit 命令
    ARP与RARP
    return 和exit
    java运行机制
  • 原文地址:https://www.cnblogs.com/codedisco/p/12849126.html
Copyright © 2011-2022 走看看