微信小程序中Map地图组件的使用

常用功能一：绘制地图标记点一个或多个

map.wxml

<!-- 
longitude 经度
latitude 纬度
scale 缩放层级 最小5，最大18
markers 地图标记
bindmarkertap 点击markers时的事件
polyline="{{polyline}}" 绘制多边形
style
 -->

<map 
  id="map" 
  longitude="113.324520" 
  latitude="23.099994" 
  scale="12" 
  markers="{{markers}}" 
  bindmarkertap="markertap" 
  polyline="{{polyline}}" 
  style="width:100%;height:300px;">
</map>

map.js

// pages/map/map.js
Page({

  /**
   * 地图页面的初始数据
   */
  data: {
    markers: [{ // 绘制浮标，传入JSON支持多个
      iconPath: "/images/location.png", //浮标图片路径，推荐png图片
      id: 0, // Id支持多个，方便后期点击浮标获取相关信息
      latitude: 23.099994, // 经度
      longitude: 113.324520, //纬度
      width: 50, // 浮标宽度
      height: 50 // 浮标高度
    }],
    polyline: [{ // 绘制多边形区域，两个点绘制直线
      points: [ // 这里传入两个点是直线，如果传入三个点以上就会是首尾相连的多边形区域
        {
          longitude: 113.3245211,
          latitude: 23.10229
        }, {
          longitude: 113.3245220,
          latitude: 23.21229
        }],
        color: "#FF0000DD", // 设置颜色
        width: 2, // 设置线宽度 注：电脑模拟器无法预览测设设置，此设置需要手机测试
        dottedLine: true // 是否设置为虚线
    }],
  },
  markertap(e) { // 这是一个事件，在wxml中绑定这个事件，点击浮标后
    wx.openLocation({ //此设置属于高级APi,可以打开微信内置地图组件
      latitude: 23.099994,
      longitude: 113.324520,
    });
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

map.json

{
  "usingComponents": {}
}

 

官网API：https://developers.weixin.qq.com/miniprogram/dev/component/map.html