微信小程序地图标记点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是地图开始的缩放层级

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;

  }
})

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