微信小程序地图标记点，点击标记点显示详细信息源码加效果图

版权声明：本文为博主原创文章，未经博主允许不得转载。如需开发微信小程序可加微信: 13977284413 https://blog.csdn.net/qq_35713752/article/details/85761711

效果图：

实现代码:

<!-- <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;}