微信小程序地图标记点marker，点击标记点显示详细信息

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

直接上代码：

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是地图开始的缩放层级
wxss:

page {height: 100%;margin: 0;padding: 0;}

/* 弹窗 */
.zan-dialog__mask {position: fixed;top: 0; left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0.4);display: none;z-index: 1001}
  
.zan-dialog__container {position: fixed; bottom: 0;width: 100%;left: 0;right: 0;overflow: hidden;border-top-left-radius: 40rpx;
    box-shadow: darkgrey 0rpx 5rpx 15rpx 8rpx;z-index: 1003;
    background: #f8f8f8; margin: 0 auto;transform: translateY(300%);transition: all 0.4s ease;border-top-right-radius: 30rpx;}
  
.zan-dialog--show .zan-dialog__container {transform: translateY(0);}
.zan-dialog--show .zan-dialog__mask {display: block;}

.b_line{margin: 0 20rpx;}
.b_line .line{width: 40%;height: 25rpx;margin: 0 auto;background-color: #eee;border-radius: 25rpx;margin-top: 30rpx;}
.b-adder text{font-size: 32rpx;color: #808080;margin-left: 10rpx;}

.content{padding: 40rpx 20rpx; display: flex;justify-content: space-between;align-items: center;}

.zan-img{width: 50%;vertical-align: bottom;height: 230rpx;border-radius: 8rpx}
.content .tips{width: 46%}

.tips .adder{font-size: 28rpx;color: #808080;padding: 10rpx 0;}

.tips .price{display: flex;justify-content: space-between;align-items: center;} 
.price .jiage{font-size: 28rpx;color: #ff7428}
.juli text{font-size: 28rpx;color: #0be200;}


.viewlittle{width: 60rpx;height: 60rpx;overflow: hidden;background-color: #fff;position: fixed;bottom: 50rpx;right: 20rpx;display: flex;justify-content: center;align-items: center;border-radius: 8rpx;z-index: 1002}
.viewlittle image{width: 50rpx;height: 50rpx;vertical-align: bottom;}

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;

  }
})

这里还实现了自动地位，点击按钮回到定位点，有什么问题或者可以共同学习一下
知道程序员都是懒的，服务到位：源码地址