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

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

index.wxml

html 复制代码
<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

html 复制代码
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;
}

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

三、代码逻辑实现

javascript 复制代码
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
        });
      }
    });
  },
});

四、点击编译查看效果

默认展示如下图所示

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

相关推荐
paopaokaka_luck26 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
老虎06276 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
郭邯11 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心14 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞19 小时前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽19 小时前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
说私域1 天前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往1 天前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw1 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld1 天前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序