沃梦达 / 编程技术 / 前端开发 / 正文

微信小程序设置地图标记点，触发显示详细信息

前端开发
2024-12-14

功能需要：在微信小程序地图上设置位置标记点，触发标记点从下面往上滑动显示当前标记点的详情介绍。

1、view代码


<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>

2、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("拨打电话失败！")
      }
    })
  }
})

3、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;
}
以上是编程学习网小编为您介绍的“微信小程序设置地图标记点，触发显示详细信息”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。

本文标题为：微信小程序设置地图标记点，触发显示详细信息

上一篇： console.log报Uncaught TypeError: Assignment to constant varia
下一篇： iphone手机兼容报错：“RangeError: invalid date”解决方法

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2