8.微信小程序之地图demo

版权声明：本文为博主原创文章，未经博主允许不得转载 https://blog.csdn.net/panzina/article/details/83114136

大佬让我调研一下微信小程序的地图怎么使用，写个一demo。

怎么感觉有好多坑。。。

一.效果图

1.用markers显示标记点，用callout自定义气泡弹窗，如图粉红框所示。点击标记点，可以打印信息；

2.随便拖动地图到任意位置，点击红色框中的内容可以返回初始位置，即“你所在的位置”

3.拖动结束时，获取地图中间的经纬度，控制台可看见信息

二.代码

1.map.wxml

<map id="map" 
    longitude="{{longitude}}"
    latitude="{{latitude}}"
    show-location
    scale='15'
    markers="{{markers}}"
    bindmarkertap="markertap"
    controls="{{controls}}"
    bindcontroltap="controltap"
    bindregionchange="regionchange"
    >
</map>

2.map.wxss

#map{
  width: 100%;
  height: 100vh;
}

3.map.js

说一个注意点。markers是标记点用于在地图上显示标记的位置，用callout可以在标记点上显示气泡弹窗，气泡弹窗中的属性fontSize、borderRadius、padding不能是字符串，必须是数字，否则没效果。

目前，markers的数据是写死的，待完善。

// pages/map/map.js
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    latitude: 0,
    longitude: 0,
    controls: [
      {
        id: 0,
        iconPath: "../../image/position.png",
        position: {
          left: 10,
          top: 400,
          width: 40,
          height: 40
        },
        clickable: true
      }
    ],
    markers: [
      {
        longitude: 108.31343,
        latitude: 22.83393,
        id: 0,
        width: 35,
        height: 30,
        callout: {
          content: "你所在的位置",
          color: "#ff0000",
          fontSize: 16,
          borderRadius: 10,
          bgColor: "#ffffff",
          padding: 10,
          display: "ALWAYS"
        }
      },
      {
        longitude: 108.28544,
        latitude: 22.83844,
        id: 0,
        width: 35,
        height: 30,
        callout: {
          content: "位置1",
          color: "#ff0000",
          fontSize: 16,
          borderRadius: 10,
          bgColor: "#ffffff",
          padding: 10,
          display: "ALWAYS"
        }
      },
      {
        longitude: 108.26073,
        latitude: 22.84558,
        id: 0,
        width: 35,
        height: 30,
        callout: {
          content: "位置2",
          color: "#ff0000",
          fontSize: 16,
          borderRadius: 10,
          bgColor: "#ffffff",
          padding: 10,
          display: "ALWAYS"
        }
      },
      {
        longitude: 108.324590,
        latitude: 22.842579,
        id: 0,
        width: 35,
        height: 30,
        callout: {
          content: "位置3",
          color: "#ff0000",
          fontSize: 16,
          borderRadius: 10,
          bgColor: "#ffffff",
          padding: 10,
          display: "ALWAYS"
        }
      },
    ]

  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    //获取当前位置
    wx.getLocation({
      success: function (res) {
        console.log(res);
        that.setData({
          longitude: res.longitude,
          latitude: res.latitude,
        })

      }
    })
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.mapCtx = wx.createMapContext('map');   //获取地图存入变量
  },

  markertap(e) {    //点击标记
    console.log(e);

  },

  regionchange(e) { //拖动地图
    if (e.type == 'end') { //如果拖动结束，也就是松开手指
      console.log('拖动结束，下面获取地图中间的经纬度');
      this.mapCtx.getCenterLocation({   //获取屏幕中间的经纬度
        success: function (res) {
          console.log(res)
        }
      })

    }
  },

  controltap(e) {   //点击左下角的固定按钮
    console.log(e.controlId)
    if (e.controlId == 0) { //如果ID是0，返回当前位置
      this.mapCtx.moveToLocation()
    } else if (e.controlId == 1) {

    }
  },


})