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

秒速五厘米 2021-09-18 15:16 1117阅读 0赞

q群： 581478349

![20190104104632431.gif][]

实现源码

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

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

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

承接web前端开发：

v:![20190220203507663.png][]![20190220203509928.png][]

[20190104104632431.gif]: /images/20210724/3bc408a8f31d451a86237a1164f782da.png
[20190220203507663.png]: https://img-blog.csdnimg.cn/20190220203507663.png
[20190220203509928.png]: /images/20210724/a85387a655d14c63ab02cbb2b4711428.png