8.微信小程序之地图demo

╰半夏微凉° 2022-05-05 09:30 293阅读 0赞

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

怎么感觉有好多坑。。。

# 一.效果图 #

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

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

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

![70][]

# 二.代码 #

## 1.map.wxml ##

## 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) {
    
        }
      },
    
    
    })

[70]: /images/20220505/8f1555a989814a1d85f8d9b4fa5aa046.png