[小程序开发]地图多点标记

2022年11月25日 11:46 by wst

小程序

---

腾讯给我提供了地图功能，怎么利用起来呢？

下面演示下，在地图上多点标记的功能。

基础版本库：2.24.7

pages/markmap/markmap.wxml

<map 
longitude="{{longitude}}" 
latitude="{{latitude}}"
markers="{{markers}}">
</map>

pages/markmap/markmap.wxss

map {
  height: 500rpx;
  width: 750rpx;
}

pages/markmap/markmap.js

// pages/markmap/markmap.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude: 117.71062,    // 中心经度
    latitude: 39.024333,       // 中心维度
    markers: [
      {
        id: 1,        //中心点标记, 预览模式下，点击标记点可以显示title
        longitude: 117.71062,    
        latitude: 39.024333,       
        title: '泰达MSDG区1栋'
      },{
        id: 2,
        longitude: 117.711014,
        latitude: 39.024943,
        title: '泰达MSDG区2栋'
      },{
        id: 3,
        longitude: 117.711455,
        latitude: 39.023864,
        title: '中国农业银行'
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

效果如下：

注意：在真机调式下或预览下才能完整显示。

源码下载：点击这里

---