精华内容
下载资源
问答
  • 微信小程序map组件

    2018-08-10 13:06:36
    微信小程序实现map组件 微信开发者工具 微信小程序实现map组件 微信开发者工具
  • 主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下
  • 从我自己开发的微信小程序中提取的一个简单demo,代码很简单,主要是通过map组件和相关api及sdk完成的功能,能够进行定位,和检索周边,真机测试可行
  • 2.1 app.js 小程序的逻辑  2.2 app.json小程序的公共设置  2.3 app.wxss 小程序的公共样式表 在app.json 配置个tab ( 类似于iOS tabbar)   { "pages":[ // 文件所在目录结构 // index.js logs.js setup.js ...
  • 主要给大家介绍了关于微信小程序map组件z-index的层级问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 使用wepy框架,请求回来的数据设置给data里面初始化的markers,使用wx:if在拿到数据后渲染map组件,模拟器上没问题,真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片...
  • 主要介绍了微信小程序 开发MAP(地图)实例详解的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序 地图map详解及简单实例的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序地图(map)组件点击(tap)获取经纬度的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了微信小程序使用map组件实现路线规划功能,结合具体实例形式分析了微信小程序基于map组件的地理位置获取、路径规划等相关操作技巧,需要的朋友可以参考下
  • 微信小程序map自定义组件实现

    千次阅读 2020-10-16 11:24:59
    效果     ... 图片   ... 鼠标放在图片上可以看到使用... id="map" setting="{{setting}}" markers="{{markers}}" bindmarkertap="markerTap" style="width: 100%; height: 100%;"><

    效果

        实际手机效果不会点击时突然闪一下,气泡弹窗也不会被其他坐标点挡住

    图片

    子组件WXML

    <map
      id="map"
      setting="{{setting}}"
      markers="{{markers}}"
      bindmarkertap="markerTap"
      style="width: 100%; height: 100%;"></map>
      <cover-image wx:if="{{showZoom}}" src="/images/zoom.png" bind:tap="zoomTap" class="zoom-img" />
    

    子组件JS

    Component({
      data: {
        markers: [], // 坐标点数据
        tapMarker: {}, // 点击过的坐标点
        setting: {
          scale: 14, // 缩放级别,取值范围为 3-20,默认为 16
          includePoints: [], // 缩放视野以包含所有给定的坐标点
          showLocation: false, // 是否显示带有方向的当前定位点,默认为 false
          showScale: false, // 是否显示比例尺,工具暂不支持,默认为 false
          subKey: '', // 个性化地图使用的key,默认为空
          layerStyle: 1, // 个性化地图配置的 style,不支持动态修改,默认为 1
          enableZoom: true, // 是否支持缩放,默认为 true
          enableScroll: true, // 是否支持拖动,默认为 true
          enableRotate: false, // 是否支持旋转,默认为 false
          showCompass: false, // 显示指南针,默认为 false
          enable3D: false, // 是否展示3D楼块(工具暂不支持),默认为 false
          enableOverlooking: false, // 是否开启俯视,默认为 false
          enableSatellite: false, // 是否开启卫星图,默认为 false
          enableTraffic: false, // 是否开启实时路况,默认为 false
        }
      },
      properties: {
        // 父组件传入的坐标点数组
        markerList: {
          type: Array,
          value: []
        },
        // 父组件没有传值的情况下默认地图中心定位坐标点:北京
        loglat: {
          type: Object,
          value: {
            latitude: 39.904469, // 地图中心纬度
            longitude: 116.398087 // 地图中心经度
          }
        },
        // 显示右上角定位按钮
        showZoom: {
          type: Boolean,
          value: true
        },
      },
      // 监听坐标点数组
      observers: {
        'markerList' (val) {
          this.initMap()
        }
      },
      /**
      * 组件在视图层布局完成后执行
      */
      ready() {
    
      },
      methods: {
        // 获取 MapContext 对象,这里封装到方法里方便使用
        getMapCtx() {
          if (this.mapCtx) {
            return this.mapCtx
          }
          // 创建 map 上下文 MapContext 对象
          this.mapCtx = wx.createMapContext('map', this)
          return this.mapCtx
        },
        // 初始化地图
        initMap() {
          const { tapMarker } = this.data
          this.resetMarkers(tapMarker, true)
        },
        // 处理父组件传进来的数据
        resetMarkers(tapMarker, initFlag = false) {
          const { markerList } = this.data
          const newList = markerList.map((item) => {
            let obj = {
              ...item,
              width: 28, // 标注图标宽度
              height: 28, // 标注图标高度
              // 显示的图标,项目目录下的图片路径,支持网络路径、本地路径、代码包路径
              iconPath: '/images/location.png', 
              // 在这里先设置一个气泡背景色和字体色,可以避免点击坐标点显示气泡弹窗时的闪现变色
              callout: {
                color: '#fff', // 气泡文本的颜色
                bgColor: '#ff7732' // 气泡背景色
              }
            }
            // 坐标点上方的气泡窗口,点击哪个坐标点就让哪个标记点显示气泡弹窗
            // 同时隐藏其他坐标点的气泡弹窗
            if(!!tapMarker && tapMarker.id === item.id) {
              obj.zIndex = 9, // 显示层级,解决点击的坐标点被其他坐标点压住的问题
              obj.callout = {
                content: item.title, // 气泡文本
                color: '#fff', // 气泡文本的颜色
                fontSize: 12, // 气泡文本字体大小
                borderRadius: 5, // 气泡边框圆角
                bgColor: '#ff7732', // 气泡背景色
                padding: 8, // 气泡文本边缘留白
                textAlign: 'left', // 气泡文本对齐方式,有效值: left, right, center
                display: "ALWAYS", // 'BYCLICK':点击显示; 'ALWAYS':常显
                anchorX: 0, // 横向偏移量,向右为正数
                anchorY: 2 // 纵向偏移量,向下为正数
              }
            }
            return obj
          })
          // 第一次初始化地图时执行以下代码,点击坐标点时不执行此代码
          if(initFlag) {
            // 如果初始化地图时有数据传入,则展示所有经纬度坐标点,否则将地图中心移置当前定位坐标点
            if(newList.length > 0) {
              const box = this.getBox(newList)
              // includePoints() 缩放视野展示所有经纬度
              this.getMapCtx().includePoints({
                // 坐标点形成的矩形边缘到地图边缘的距离,单位像素。
                // 格式为[上,右,下,左],安卓上只能识别数组第一项,上下左右的padding一致。
                // 开发者工具暂不支持padding参数
                // 防止坐标点溢出
                padding: [40, 40, 40, 40],
                // 要显示在可视区域内的坐标点列表,必填须
                points: [
                  { latitude: box.top, longitude: box.left },
                  { latitude: box.bottom, longitude: box.right }
                ],
                success: function (res) {
                  // console.log(res)
                }
              })
            } else {
              // moveToLocation() 将地图中心移置当前定位坐标点
              this.getMapCtx().moveToLocation(this.data.loglat)
            }
          }
          this.setData({
            markers: newList,
            tapMarker: tapMarker
          })
        },
        // 获取所有坐标点的最大经纬度范围
        getBox(markers) {
          let left = null
          let right = null
          let top = null
          let bottom = null
          markers.forEach((item) => {
            if (!item.longitude || !item.latitude) {
              return
            }
            if (!left) {
              left = item.longitude
            }
            if (!right) {
              right = item.longitude
            }
            if (!top) {
              top = item.latitude
            }
            if (!bottom) {
              bottom = item.latitude
            }
            left = Math.min(left, item.longitude)
            right = Math.max(right, item.longitude)
            top = Math.max(top, item.latitude)
            bottom = Math.min(bottom, item.latitude)
          })
          return { left, right, top, bottom }
        },
        // 点击定位到初始中心坐标位置
        zoomTap (e) {
          const { markerList } = this.data
          if (markerList.length > 0) {
            const box = this.getBox(markerList)
            // includePoints() 缩放视野展示所有经纬度
            this.getMapCtx().includePoints({
              // 坐标点形成的矩形边缘到地图边缘的距离,单位像素。
              // 格式为[上,右,下,左],安卓上只能识别数组第一项,上下左右的padding一致。
              // 开发者工具暂不支持padding参数
              // 防止坐标点溢出
              padding: [40, 40, 40, 40],
              // 要显示在可视区域内的坐标点列表,必填须
              points: [
                { latitude: box.top, longitude: box.left },
                { latitude: box.bottom, longitude: box.right }
              ],
              success: function (res) {
                // console.log(res)
              }
            })
          } else {
            // moveToLocation() 将地图中心移置当前定位点
            this.getMapCtx().moveToLocation(this.data.loglat)
          }
        },
        // 点击坐标点时触发,e.detail = {markerId}
        markerTap(e) {
          const that = this
          const { tapMarker, markerList } = this.data
          const markerId = e.detail.markerId
          const marker = markerList.find((item) => item.id === markerId)
          if (!marker) {
            return
          }
          // 首次点击显示气泡弹窗,二次点击触发自定义点击事件
          if (tapMarker && tapMarker.id === marker.id) {
            this.triggerEvent('markerTap', tapMarker)
            return
          }
          // getRegion() 获取当前地图的视野范围
          this.getMapCtx().getRegion({
            success: function(res) {
              that.resetMarkers(marker) // 调用地图初始化方法,点击坐标点时显示气泡弹窗
            }
          })
        }
      }
    })
    

    子组件JSON

    {
      "component": true,
      "usingComponents": {}
    }
    

    子组件WXSS

    .zoom-img {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      right: 12rpx;
      top: 20rpx;
    }
    

    父组件WXML

    <view class="container">
      <view class="map">
        <custom-map loglat="{{loglat}}" markerList="{{markerList}}" bind:markerTap="markerTap"></custom-map>
      </view>
    </view>
    

    父组件JS

    Page({
      data: {
        markerList: [
          {
            id: 1,
            title: '深圳市民中心',
            latitude: 22.543689,
            longitude: 114.059626
          },
          {
            id: 2,
            title: '深圳站',
            latitude: 22.531680,
            longitude: 114.117209
          },
          {
            id: 3,
            title: '深圳北站',
            latitude: 22.609581,
            longitude: 114.029225
          },
          {
            id: 4,
            title: '深圳西站',
            latitude: 22.527874,
            longitude: 113.907731
          },
          {
            id: 5,
            title: '深圳东站',
            latitude: 22.602148,
            longitude: 114.120102
          },
          {
            id: 6,
            title: '福田站',
            latitude: 22.538122,
            longitude: 114.057241
          },
          {
            id: 7,
            title: '坂田站',
            latitude: 22.624926,
            longitude: 114.053187
          },
          {
            id: 8,
            title: '福田区人民政府',
            latitude: 22.521078,
            longitude: 114.054110
          },
          {
            id: 9,
            title: '南山区人民政府',
            latitude: 22.533109,
            longitude: 113.930547
          },
          {
            id: 10,
            title: '宝安区人民政府',
            latitude: 22.554999,
            longitude: 113.883805
          },
          {
            id: 11,
            title: '罗湖区人民政府',
            latitude: 22.548306,
            longitude: 114.131747
          }
        ], 
        // 地图中心定位坐标点
        loglat: {
          latitude: 22.556416, // 地图中心纬度
          longitude: 114.049144 // 地图中心经度
        }
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
      // 点击地图坐标点触发此方法
      markerTap(e) {
        const { title } = e.detail
        wx.showToast({
          title: title,
          icon: 'none',
          duration: 1600
        })
      }
    })
    

    父组件JSON

    {
      "navigationBarTitleText": "搜索",
      "usingComponents": {
        "custom-map": "../../components/custom-map/index"
      }
    }
    

    父组件WXSS

    page {
      background: #fff;
    }
    .container {
      width: 100%;
    }
    .map {
      width: 100%;
      height: 600rpx;
      position: relative;
    }
    
    展开全文
  • 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中。 感谢: 感谢Lrj_estranged指出问题! 效果图 实现方法 1. ...
  • 微信小程序map地图实现标记多个位置(导入即可用) 可参考博文:https://blog.csdn.net/weixin_43042683/article/details/103555505
  • 这问题的根源就是小程序地图并没有销毁地图的方法,所以我们只能通过去掉地图上的点或者线来实现销毁地图的效果,但是这是有一个前提的,因为我们不能直接通过销毁地图来更新数据,所以我们只能在轨迹回放到一个点...

    map地图轨迹回放报FaceTo的错误

    faceTo的错误
    如果你的轨迹回放报出这个错误,那么你可能和我一样,是在轨迹回放还未结束的时候或者说是还没有到一个点停止的时候就更新了新的位置信息,想让地图重新的渲染并执行。
    这问题的根源就是小程序地图并没有销毁地图的方法,所以我们只能通过去掉地图上的点或者线来实现销毁地图的效果,但是这是有一个前提的,因为我们不能直接通过销毁地图来更新数据,所以我们只能在轨迹回放到一个点结束或者是全部回放结束了的时候才能开始更换新的数据,如果在中途就突然的更新掉数据那么就会报上图的错。
    所以解决方法就是做一个判断,在轨迹未到下一个点的时候就让他继续走,直到触发到了下一个点,就可以进行数据的更新了。
    轨迹回放代码

    这边附上我敲的代码,因为我使用的是小程序的translateMarker方法,所以在到每一个点的都会被触发,我就是在成功的success状态上判断是否需要更新数据。
    
    展开全文
  • 微信小程序 地图(map)实例  这里是小编对微信小程序 地图(map API )做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下。 今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试...
  • 在使用微信小程序使用map组件开发时遇到了一个问题,应该是官网的bug,就是当添加marker标签后同时给地图

     

    index.wxml:

    在微信小程序中使用map组件开发时遇到了一个问题,应该是官网的bug,就是当添加marker标签后同时给地图绑定bindtap事件和标签事件bindmarkertap事件,当点击marker后也会触发bindtap事件,导致不能单独对marker标签进行事件操作;

    以下是解决方案:(思路阐述)

    这里利用marker标签点击后会先执行bindtap事件再去执行bindmarkertap事件的特性,在点击marker标签后利用节流的方案来只执行规定事件内最后一次点击事件(即bindmarkertap事件),这样就合理地解决了这个bug

    index.wxml:

    // wxml
    <map    
          id="myMap"
          style="width: 100%; height: 100vh;"
          latitude="{{latitude}}"
          longitude="{{longitude}}"
          markers="{{markerList}}"
          scale="{{scale}}"
          show-location
          bindmarkertap="toMarkerForm" // marker点击事件
          bindtap="toMarkerForm" // 地图点击事件
          enable-satellite="{{true}}"
        ></map>

    index.js: 

    // js
    Page({
    data: {
      event: null
    },
    // bindtap和bindmarkertap事件同时同意入口进行节流操作
    toMarkerForm: function (e) {
      // 保存event 
      this.setData({
        event: e,
      })
      // 节流控制只执行最后一次点击事件
      throttle(this.goForm, 100)
    },
    goForm: function (e) {
      const { event } = this.data
    
      if (event) {
        if (event.type === 'markertap') {
            console.log('点击了marker')
          } else {
            console.log('点击了地图')
          }
        }
    })

    节流函数(util.js)

    let timer = null;
    const throttle = (fn, wait) => {
      let context = this;
      let args = arguments;
    
      if (!timer) {
        timer = setTimeout(() => {
          fn.apply(context, args);
          timer = null;
        }, wait)
      }
    }

     

    小伙伴如果有疑问可以第一时间评论或留言,看到后也会及时回复的,有帮助的麻烦动动手指点个赞哟

    展开全文
  • 今天练习写微信小程序时,发现在map组件的标签内也无法改变四个角的弧度; 百度了一会,似乎无法控制map组件四角弧度; 后来想到一个解决办法,写此博客希望能给遇到同样困难的人一个参考; 效果图: .mymap{ ...

    今天练习写微信小程序时,发现在map组件的标签内也无法改变四个角的弧度;
    百度了一会,似乎无法控制map组件四角弧度;
    后来想到一个解决办法,写此博客希望能给遇到同样困难的人一个参考;
    效果图:
    在这里插入图片描述

    .mymap{
      width: 690rpx;
      height: 220rpx;
      margin-left: 30rpx;
      margin-top: 10rpx;
      border-radius: 20rpx;
      overflow:hidden;
    }
    
    <view class="mymap">
        <map longitude="113" latitude="23" style="width:690rpx;height:220rpx;"></map>
    </view>
    

    将map的宽高设置于父类view宽高相等,给map的父类view设置四角的弧度,然后用overflow:hidden将溢出的隐藏就可以实现预期效果了。

    展开全文
  • 微信小程序map中polyline的坑polylinepolyline层级 polyline 如果大家写过小程序的map地图应该就知道polyline的功效,说白了就是画线的,我在自己的项目中主要是用它来做轨迹回放的,我那地图上有两条线,第一条...
  • 微信小程序地图聚合示例代码,运用分格子算法,可聚合2w+的坐标点,具体说明请移步至我的博客https://blog.csdn.net/zw21544182/article/details/106048945
  • 微信小程序map地图的标记markers好好的,几个月后打开一片空白,真是无语,各种百度,后来发现是height:100%不支持!!!!!改成 height: 1200rpx;就可以了,非常无语 <map id="myMap" markers="{{markers}}" ...
  • 小程序map组件实现定位 map.wxml <map class="map" longitude="{{longitude}}" latitude="{{latitude}}" show-location name="" markers="{{markers}}"></map> <!-- 获取路线 --> <view wx:...
  • map id="myMap" show-location class="container" style="width: 100%; height: 800rpx;" /> </view> onShow: function() { this.mapCtx = wx.createMapContext('myMap') this.mapCtx.moveToLocation() ...
  • map.wxml页面 点击标记触发事件:bindmarkertap="marjertap" map.js页面 为每个marker设置id号 判断不同marker的id号是否满足条件:if(e.detail.markerId==id号)
  • 主要介绍了微信小程序开发之map地图组件,定位,并手动修改位置偏差,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • map id=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;map&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; latitude=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;{{latitude}
  • // map.wxml <map id="mapp" latitude="37.4857" longitude="121.4468" scale="15" show-compass="true"show-scale="true" markers="{{markers}}" polyline="{{polyline}}"> </map> // ma...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,580
精华内容 12,232
关键字:

微信小程序map

微信小程序 订阅