精华内容
下载资源
问答
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图: 实现代码: <!-- <text>{{markers[id].placeName}}</text> --> <block wx:if='{{isshow}}'> <...

    微信小程序开发交流qq群   173683895

       承接微信小程序开发。扫码加微信。

     

    效果图:

    实现代码:

    <!-- <text>{{markers[id].placeName}}</text> -->
    <block wx:if='{{isshow}}'>
      <map id="map" longitude="114.048410" latitude="22.648760" scale="8" include-points="{{markers}}" markers="{{markers}}" bindmarkertap="showModal" data-id="{{markers}}" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100%;">
    
    
        <cover-view class='index_bt1'>
          <cover-image class='xiaoer' bindtap="login" src="/images/mk.png" />
        </cover-view>
        <cover-view class='index_shuaxin'>
          <cover-image class='shuaxin' src="/images/mk.png" />
        </cover-view>
    
        <!--屏幕背景变暗的背景  -->
        <cover-view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></cover-view>
        <!--弹出框  -->
        <cover-view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
    
          <cover-view class='placeBox'>
    
            <cover-view class='placeViewLt'>
              <cover-view class='viewTitle'>{{myall.placeName}}</cover-view>
              <cover-view class='viewDis'>{{myall.dis}}</cover-view>
              <cover-view class='viewAddr'>{{myall.adr}}</cover-view>
            </cover-view>
            <cover-view class='placeViewRt'>
              <cover-image data-id="{{myall.id}}" bindtap="opendetail" src='/images/mk.png'></cover-image>
            </cover-view>
    
          </cover-view>
    
    
          <cover-view class='viewIcon'>
            <cover-image class='indexIcon' src='/images/time.png'></cover-image>
            <cover-view class='timeText'>{{myall.time}}</cover-view>
    
            <cover-image class='indexIcon1' data-id="{{myall}}" src='/images/share.png' bindtap='calling'></cover-image>
            <cover-view class='timeText1' data-id="{{myall}}" bindtap='calling'>电话</cover-view>
    
            <cover-image class='indexIcon2' src='/images/nav.png'></cover-image>
            <cover-view class='timeText1'>导航</cover-view>
          </cover-view>
    
        </cover-view>
      </map>
    
    </block>

    js

    // map.js
    var app = getApp()
    var mymap = '';
    var lat = '';
    var long = '';
    Page({
      data: {
        polyline: [{
          points: [{
            longitude: 113.3245211,
            latitude: 23.10229
          }, {
            longitude: 113.324520,
            latitude: 23.21229
          }],
          color: '#FF0000DD',
          width: 2,
          dottedLine: true
        }],
        controls: [{
          id: 1,
          iconPath: '/images/mk.png',
          position: {
            left: 0,
            top: 300 - 1,
            width: 50,
            height: 50
          },
          clickable: true
        }]
      },
      //引入数据库
      onLoad: function(option) {
        var url = app.url + 'Api/Api/get_shop_dp&PHPSESSID=' + wx.getStorageSync('PHPSESSID')
        var that = this
        console.log(option)
        if (option.scene) {
          this.setData({
            isshow: false
          })
          wx.navigateTo({
            url: '../chat/chat?scene=' + option.scene,
          })
        } else {
          this.setData({
            isshow: true
          })
        }
        wx.request({ //让服务器端统一下单,并返回小程序支付的参数
          url: url,
          data: {
            openid: wx.getStorageSync('openid')
          },
          success: function(res) {
            console.log(res);
            that.setData({
              markers: res.data.data
            });
            wx.getLocation({
              type: 'wgs84',
              success(mres) {
                var map_lat = mres.latitude;
                var map_long = mres.longitude;
                var map_speed = mres.speed;
                var map_accuracy = mres.accuracy;
                that.setData({
                  lat: map_lat
                });
                that.setData({
                  long: map_long
                });
              }
            });
          }
        });
      },
    
      //显示对话框
      showModal: function(event) {
        //console.log(event.markerId);
        var i = event.markerId;
        var url = app.url + 'Api/Api/get_shop_dp_detail&PHPSESSID=' + wx.getStorageSync('PHPSESSID');
        var that = this;
        console.log('====get_detail====')
        wx.request({ 
          url: url,
          data: {
            id: i,
            openid: wx.getStorageSync('openid')
          },
          success: function(res) {
            console.log(res);
            that.setData({
              myall: res.data.data
            });
          }
        });
    
        // 显示遮罩层
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
          animationData: animation.export(),
          showModalStatus: true
        })
        setTimeout(function() {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export()
          })
        }.bind(this), 200)
      },
      //隐藏对话框
      hideModal: function() {
        // 隐藏遮罩层
        var animation = wx.createAnimation({
          duration: 200,
          timingFunction: "linear",
          delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
          animationData: animation.export(),
        })
        setTimeout(function() {
          animation.translateY(0).step()
          this.setData({
            animationData: animation.export(),
            showModalStatus: false
          })
        }.bind(this), 200)
      },
    
      opendetail: function(event) {
        console.log('-----跳转商品-----');
        //console.log(event);
        var id = event.currentTarget.dataset.id;
        this.setData({
          id: id
        });
        wx.navigateTo({
            url: "/pages/detail/detail?id=" + id
          }),
          console.log(id);
      },
    
      calling: function(event) {
        var tel = event.currentTarget.dataset.id.tel;
        this.setData({
          tel: tel
        });
        wx.makePhoneCall({
          phoneNumber: tel,
          success: function() {
            console.log("拨打电话成功!")
          },
          fail: function() {
            console.log("拨打电话失败!")
          }
        })
      }
    })

    css

    /* index/index.wxss */
    page{
      height: 100%;
    }
    .index_bt1{
      width: 100rpx;
      height: 100rpx;
      padding-top:30rpx;
      margin-left: 600rpx;
    }
    
    .xiaoer{
      width: 100rpx;
      height: 100rpx;
    }
    
    .index_shuaxin{
      width: 60rpx;
      height: 60rpx;
      padding-top: 860rpx;
      margin-left: 20rpx;
    }
    
    .shuaxin{
      width: 60rpx;
      height: 60rpx;
    }
    
    .sch{
      display: block;
    	z-index: 999999;
      height: 69rpx;
      width:100%; 
      margin:0 auto;
      padding-top: 30rpx;
    }
    
    /*底部弹窗开始 -使屏幕变暗  */
    .commodity_screen {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.2;
      overflow: hidden;
      z-index: 1000;
      color: #fff;
    }
    /*对话框 */
    .commodity_attr_box {
      height: 280rpx;
      width: 100%;
      overflow: hidden;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 2000;
      background: #fff;
      padding-top: 0rpx;
    }
    
    .placeBox{
      width: 100%;
      height: 150rpx;
    }
    
    .placeViewLt{
      display: inline-block;
      width: 620rpx;
      height: 140rpx;
    
      vertical-align: middle;
    }
    
    .viewTitle{
      display: block;
      font-size: 38rpx;
      color: #3F51B5;
      margin-left: 20rpx;
      padding-top: 34rpx;
    }
    
    .viewDis{
      display: inline-block;
      font-size: 26rpx;
      color: gray;
      margin-left: 20rpx;
    }
    
    .viewAddr{
      display: inline-block;
      font-size: 28rpx;
      color: gray;
      margin-left: 20rpx;
    }
    
    .placeViewRt{
      display: inline-block;
      width: 120rpx;
      height: 120rpx;
      padding-top: 6rpx;
      vertical-align: middle;
    }
    
    .viewIcon{
      display: block;
      height: 100rpx;
      width: 100%;
      border-top: 1px solid #ebebeb;
      padding-top: 40rpx;
    }
    
    .indexIcon{
      display: inline-block;
      width: 50rpx;
      height: 50rpx;
      margin-left: 40rpx;
      vertical-align: middle;
    }
    
    .timeText{
      display: inline-block;
      line-height: 45rpx;
      margin-left: 12rpx;
      text-align: center;
      width: 200rpx;
      height: 45rpx;
      background-color: rgb(230, 234, 255);
      border-radius: 10px;
      color: #3F51B5;
      font-size: 24rpx;
    }
    
    .indexIcon1{
      display: inline-block;
      width: 50rpx;
      height: 50rpx;
      margin-left: 110rpx;
      vertical-align: middle;
    }
    
    .indexIcon2{
      display: inline-block;
      width: 50rpx;
      height: 50rpx;
      margin-left: 20rpx;
      vertical-align: middle;
    }
    
    .timeText1{
      display: inline-block;
      line-height: 45rpx;
      margin-left: 12rpx;
      width: 100rpx;
      height: 45rpx;
      color: #3F51B5;
      font-size: 24rpx;
    }
    
    .timeText2{
      display: inline-block;
      line-height: 45rpx;
      margin-left: 12rpx;
      width: 200rpx;
      height: 45rpx;
      color: #3F51B5;
      font-size: 24rpx;
    }
    .btn-area{ width: 100%;}
    .btn_no{ float:left;width: 40%; margin-left: 5%;border: 0px;}
    .btn_ok{ float:left;width: 40%; margin-left: 10%;margin-right: 5%; border: 0px;}

     

    展开全文
  • 项目中想要实现的效果在地图上显示所有数据标点,点击显示详情信息,首先看一下图片是否符合各位的需求,在这里也是学习加深一下 直接上代码: wxml: <map id="myMap" scale="9" bindcontroltap="controltap" ...

    项目中想要实现的效果在地图上显示所有数据标点,点击显示详情信息,首先看一下图片是否符合各位的需求,在这里也是学习加深一下
    在这里插入图片描述

    直接上代码:

    wxml:

    <map id="myMap"  scale="9" bindcontroltap="controltap" latitude="{{centerY}}" longitude="{{centerX}}" markers="{{markers}}" bindlabeltap="markertap" bindregiοnchange="regionchange" show-location style="width: 100%; height:100%;" >
    
    <!-- scale是地图开始的缩放层级 -->
    
    <view class="viewlittle" bindtap="moveTolocation" >
        <image src="../../image/huidaoyuandian.png" ></image>
    </view>
    
    
    <!-- 弹窗 -->
    <view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}" >
      <view class="zan-dialog__mask" bindtap="toggleDialog" />
        <!-- 内容 -->
        <view class="zan-dialog__container">
    
            <view class="content">
                <image class="zan-img" src='https://mutuan.com/uploads/image/20200114/76bb076b83357af1c31eb2636a8afca4.jpg'></image>
                <view class="tips">
                    <view class="lingyuanName">{{lingyuanName}}</view>
                    
                    <view class="adder">广东 珠海</view>
                    <view class="price">
                        <view class="jiage">门票价:300元起</view>
                        <view class="juli">
                            <icon class="iconfontlsda iconlocate-02"></icon>
                            <text>50km</text>
                        </view>
                    </view>
                </view>
            </view>
            
        </view>
    </view>
    
    </map>
    

    scale是地图开始的缩放层级

    js:

    // 引入SDK核心类
    var QQMapWX = require('../../utils/qqmap-wx-jssdk.min');
    // 数据
    let lingyuanData = require('../../utils/data')
    
    // 实例化API核心类
    var qqmapsdk = new QQMapWX({
      key: 'xxxxx' //如果是单单实现这些效果不需要去申请
    });
    const app = getApp()
    
    Page({
      data: {
        // centerX: 113.3345211,
        // centerY: 23.10229,
        markers: [],
        showDialog: false,
        mapId: "myMap" //wxml中的map的Id值
      },
      // 点击回到原点
      moveTolocation: function () {
        // console.log(123)
        let Id = this.data.mapId
        var mapCtx = wx.createMapContext(Id);
        mapCtx.moveToLocation();
      },
    
      onReady: function (e) {
        // 使用 wx.createMapContext 获取 map 上下文 
        this.mapCtx = wx.createMapContext('myMap')
      },
      onLoad: function () {
        // console.log('地图定位!')
        let that = this
        wx.getLocation({
          type: 'gcj02', //返回可以用于wx.openLocation的经纬度
          success: (res) => {
            console.log(res)
            let latitude = res.latitude;
            let longitude = res.longitude;
            let marker = this.createMarker(res);
            this.setData({
              centerX: longitude,
              centerY: latitude,
              markers: this.getLingyuanMarkers(),
            })
          }
        });
      },
      regionchange(e) {
        // console.log(e.type)
      },
      // 点击标点获取数据
      markertap(e) {
        var id = e.markerId
        var name = this.data.markers[id - 1].name
        console.log(name)
        this.setData({
          lingyuanName: name,
          showDialog: true,
        })
      },
      toggleDialog: function () {
        this.setData({
          showDialog: false,
        })
      },
    
      getLingyuanMarkers() {
        let markers = [];
        for (let item of lingyuanData) {
          let marker = this.createMarker(item);
          markers.push(marker)
        }
        return markers;
      },
      // moveToLocation: function () {
      //   this.mapCtx.moveToLocation()
    
      // },
      createMarker(point) {
        let latitude = point.latitude;
        let longitude = point.longitude;
        let marker = {
          iconPath: "/image/location.png",
          id: point.id || 0,
          name: point.name || '',
          latitude: latitude,
          longitude: longitude,
          width: 30,
          height: 30,
          label: {
            content: point.name,
            color: '#22ac38',
            fontSize: 14,
            bgColor: "#fff",
            borderRadius: 30,
            borderColor: "#22ac38",
            borderWidth: 1,
            padding: 3
          },
          callout: {
            content: point.name,
            fontSize: 0,
          }
        };
        return marker;
    
      }
    })
    

    这里还实现了自动地位,点击按钮回到定位点,有什么问题或者可以共同学习一下
    需要源码的可以在下面评论留言

    展开全文
  • 微信小程序 地图标记

    千次阅读 2018-08-09 17:51:19
    微信小程序 地图标记 .wxml &lt;map latitude="{{latitude}}" longitude="{{longitude}}" show-location="true" style="width: 100%; height: 550px;" scale="...

    微信小程序 地图标记

    .wxml
    
    <map latitude="{{latitude}}" longitude="{{longitude}}" show-location="true"  style="width: 100%; height: 550px;" scale="10"
     markers="{{markers}}"/>
    
    .js
    
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        longitude:[],
        latitude:[],
        markers:[]
    
      },
    
      onLoad: function (options) {
        var that = this; 
    
        // 获取当前地理位置
        wx.getLocation({
          type: 'wgs84',
          success: function (res) {
            var latitude = res.latitude
            var  longitude = res.longitude
    
            var markers = new Array();
              //数据库读取标记信息
            wx.request({
              url: 'http://localhost/action.php',//请求地址
              data: {},
              header: {//请求头
                "Content-Type": "applciation/json"
              },
              method: "get",
              success: function (res) {
                var data = res.data;
                //console.log(data)
    
                for (var i = 0;i < data.length; i++) {
                  var name = data[i].name; //名称
                  var lat = data[i].latitude; //经度
                  var lon = data[i].longitude;//纬度
    
                  var info = {
                    id : 0,
                    iconPath: "/images/marker_red.png",
                    latitude: '',
                    longitude: '',
                    width: 20,
                    height: 25,
                    title: "",
                  };
                  info.id = i
                  info.latitude = lat
                  info.longitude = lon
                  info.title = name
    
                  markers.push(info);
                }
    
                var str = JSON.stringify(markers);
                console.log(markers);
                // console.log(latitude);
                 //console.log(longitude);
                that.setData(
                  {
                    latitude: latitude,
                    longitude: longitude,
                  markers: markers
                  }
                )
    
              },  
              fail: function (err) { },//请求失败
              complete: function () { }//请求完成后执行的函数
            })
          }
        })
      }
    )}
    展开全文
  • 微信小程序地图添加标记点

    千次阅读 2020-01-02 11:02:31
    如图所示;   ; height:{{windowH}}px;"> 我们只需给组件 markers 传入一个数组即可,参数如下; 具体参数可参考官方文档 ...喜欢上方小程序,需要源码的,私信小编留下邮箱。

    如图所示;

     

    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14"  markers="{{markers}}" bindtap='onLocation' polyline="{{polyline}}" show-location style="width: 100%; height:{{windowH}}px;"></map>

    我们只需给组件markers传入一个数组即可,参数如下;

    具体参数可参考官方文档

     https://developers.weixin.qq.com/miniprogram/dev/component/map.html

     

    喜欢上方小程序,需要源码的,私信小编留下邮箱。

    展开全文
  • 项目需求,在微信小程序地图中,实现打点,然后点击某个要能弹出关于这个的某些信息,同时在当前跳到其他时,对应信息也要替换,点击空白处要关闭弹窗,在此做个记录 最终实现效果如图**(展示用的是小...
  • 微信小程序 腾讯地图大头针定位,获取当前地址,地图移动选点,定位当前位置:...微信小程序地图搜索:https://blog.csdn.net/summer_ck/article/details/89472134 ...
  • 微信开放文档_map组件 <!--地图组件--> <map id="myMap" style="width:100vw;height:100vh;z-index:1" markers="{{markers}}"></map> markers = { iconPath: ...
  • 微信小程序 地图map 微信小程序map 地图 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   ...
  • 微信小程序地图使用用户头像标记

    千次阅读 2018-07-13 00:19:30
    一、在开发微信小程序地图的过程中,有这样一个需求,用户发表祝福语,然后存入数据库,可以在地图上显示用户头像并且点击用户头像时显示祝福语。二、自己在开发时遇到的问题:1.微信头像是网络图片,而地图的...
  • 地图上需要展示的标记点 marker 过多时,可能会导致界面上 marker 出现压盖,展示不全,并导致整体性能变差。针对此类问题,可以使用点聚合能力。 快速使用 在marker对象中添加 joinCluster 属性为 true 即可 ...
  • 微信小程序简单实现地图悬浮框,点击地图添加标记点,点击标记点改变复选框数据。解压即可用,亲测有效,代码简单。
  • 如题,当小程序中ios中同时点击地图标记点两次时,标记的事件无法触发成功。 如果不需要显示气泡,可以将markets数组中的title 字段取消了或改成其他字段即可,改成name也不行
  • 微信小程序地图拖动

    2020-01-21 14:11:34
    微信小程序地图拖动 转载:腾讯地图拖动
  • 最近在做一个微信小程序地图插件,通过传入起始位置名称和经纬度信息,就可以跳转到路线规划插件页面中,在该页面中,可以根据起始位置查询自驾,公共交通,步行等方式的路线信息,并且在地图上显示路线信息,在这个...
  • uni-app 中使用微信小程序第三方 SDK 及资源汇总 1、高德地图>控制台>申请小程序key 2、下载它的微信小程序版 SDK 微信小程序SDK下载 3、新建一个 uni-app 项目,新建一个 common 目录,然后将前面下载...
  • (参考微信小程序地图组件polyline属性) 2、在获取的坐标上标注某一个位置,实现打点。(参考微信小程序地图组件marker属性 ) 3、使用map组件 微信小程序地图组件api地址:...
  • 问题:如何去除微信小程序地图组件的iconPath配置? 如果iconPath填写为none,在安卓真机、开发者工具均无问题,iphone真机上会显示地图自带的标记点,控制台也会报错没有这个图片资源。 解决:用透明的背景图片...
  • 微信小程序map地图点击标记获取用户全部下信息 首先可以先去了解一下微信开发文档map怎么获取点击用户https://developers.weixin.qq.com/miniprogram/dev/component/map.html .wxml <map id="map" bindmarkertap=...
  • 微信小程序地图找店

    2020-12-01 14:20:51
    微信小程序地图找店 容小编感慨一句: 2020年最后一个月,flag都实现了吗? 文章目录微信小程序地图找店效果图wxmljs初始化创建Map对象获取当前经纬度1. 获取用户当前设置2. 获取当前位置获取附近商家列表创建marker...
  • 微信小程序 wxapp地图 map: map 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   覆盖物 ...
  • 微信小程序—map地图实现标记多个位置(导入即可用) 可参考博文:https://blog.csdn.net/weixin_43042683/article/details/103555505
  • 开发那事(十一)微信小程序地图聚合功能实现

    千次阅读 热门讨论 2020-05-11 22:54:24
    公司项目需求要在微信小程序上实现地图marker聚合的功能,百度苦寻无果,故自己实现。 核心思路 marker标签中的callout属性用来显示聚合的数量 点击聚合时,以聚合为中心放大地图,不需要再次请求后台接口 ...
  • 微信小程序地图

    2020-03-30 16:09:07
    地图组件: 完成两大功能:A .显示地理位置;B .标记建筑物。 1、完成最简单的地图显示: 为通过CSS设置一个宽度和高度。...腾讯微信总部:longitude=113.324520 latitude=23.099994 石家庄世纪公园:longitud...
  • 地图是我们平时经常用到的组件,而且地图是显示在最高层的原生组件。任何组件都不能遮挡住map的显示,只有特殊的如cover-image等可以显示在地图的上层。 <map id="map" latitude="{{latitude}}" longitude="{{...
  • 主要介绍了微信小程序地图(map)组件点击(tap)获取经纬度的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,885
精华内容 1,154
关键字:

微信小程序地图标记点

微信小程序 订阅