微信小程序2-地图显示和地图标记

搜索 微信小程序 “动物觅踪” 观看效果 

感谢阅读，初学小白，有错指正。 

一、index修改页面，让页面能够显示地图和一个添加标记的按钮。

index.wxml

<scroll-view class="scrollarea" scroll-y type="list">
  <view class="index_container">
    <map id="map" style="width: 100%; height: 100%;" bindmarkertap="markertap" bindregionchange="regionchange" markers="{{markers}}">
      <button type="primary" bindtap="addMarker">添加</button>
    </map>
  </view>
</scroll-view>

        scrollarea和index_container都是容器，为了布局而用的。内容主要有两个元素map和button，

        其中我把button放在了map元素里面是为了实现，地图全屏，按钮在地图上的效果。

        map元素：

                style：设置元素占用空间，是相对于index_container容器的比例，因为index_container包含mapy元素。

                bindmarkertap：定义一个回调函数，当点击地图中某个标记点的时候触发该回调函数，可用于处理标记点的信息。

                regionchange：定义一个回调函数，当地图手动缩放的时候触发该回调函数，可用于处理地图视野变化的动作。

                markers：地图添加标记的数组，下文细说。

        button元素：

                bindtap：按钮的回调函数。

                还有按钮的大小、颜色、透明度等可以修改

                还可以写成<button class="format" type="primary" bindtap="addMarker">添加</button>

                format中定义按钮的样式，这种方法后面会细说。

二、修改index布局格式

index.wxss

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.index_container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: left;
  margin-left: 0rpx;
  justify-content: space-between;
  padding: 0 0;
  box-sizing: border-box;
}

都是一些配置参数，通过名字即可了解意思，看不懂的百度搜索，基本都能搜到。

三、代码逻辑实现

Page({
  data: {        // 页面内全局变量，可通过this.data.markers使用，index.wxml中可通过{{markers}}使用
    markers: []
  },

  // 监听页面初次渲染完成
  onReady: function (e) {
    //this.requestLocationPermission()
    this.mapCtx = wx.createMapContext('map', this) // 创建地图上下文环境变量
    var that = this;

    // 获取设备当前中心定位
    this.mapCtx.getCenterLocation({
      success: function (res) {
        that.mapCtx.moveToLocation({ // 将地图中心移动至当前定位
          longitude: Number(res.longitude),
          latitude: Number(res.latitude),
          // longitude: Number(118.796000),
          // latitude: Number(32.058300),
        })
      }
    })
  },
  markertap: function (e) {
    // 处理点击标记点事件，可以在这里展示照片和文字信息
  },
  regionchange: function (e) {
    // 处理地图视野变化事件
  },
  addMarker: function () {
    // 添加标记点
    var that = this;

    this.mapCtx.getCenterLocation({
      success: function (res) {
        var markers = that.data.markers;

        console.log(res, markers);
        markers.push({
          iconPath: '/claw.png',  // 标记点图片，放在app.js同级目录下
          id: markers.length,
          latitude: res.latitude, // 标记点坐标
          longitude: res.longitude,
          title: '标记' + markers.length,
          width: 25,              // 标记点图片长、宽
          height: 25
        });
        that.setData({
          markers: markers
        });
      }
    });
  },
});

四、点击编译查看效果

默认展示如下图所示

  

点击“添加”按钮会在当前地图中心添加一个标记