微信小程序地图控件Map的简单配置及使用

最新推荐文章于 2024-08-12 10:46:36 发布

峨M峰

最新推荐文章于 2024-08-12 10:46:36 发布

阅读量1.2k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_46719229/article/details/131188441

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果如下

在这里插入图片描述

.wxml

<!-- 地图 -->
<view class="container">
  <map class='map' setting="{{setting}}" longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' markers='{{markers}}' controls="{{controls}}">
    <!-- 切换模式 -->
    <view class="btns">
      <block wx:for="{{list}}" wx:key="index">
        <text class="btn {{type === item.type ? 'active' : ''}}" catchtap="switchType" data-type="{{item.type}}">{{item.name}}</text>
      </block>
    </view>
  </map>
</view>

.js

Page({
  data: {
    type: 'map',
    list: [
      {
        name: '地图',
        type: 'map'
      },
      {
        name: '卫星',
        type: 'satellite'
      }
    ],
    longitude: 116.3975, //中心经度
    latitude: 39.9087, //中心纬度
    scale: 14,//缩放级别，取值范围为3-20
    markers: [//标记点
      {
        id: 1,
        joinCluster: true,
        longitude: 116.3975,
        latitude: 39.9087,
        title: '天安门',
        width: '20',
        height: '30',
      }
    ],

    setting: {
      showLocation: true, //当前位置
      enableZoom: true, //缩放
      enableRotate: true, //旋转
      enableSatellite: false,
      enableBuilding: true //展示建筑物
    }
  },

  onLoad() { },

  // 切换地图类型
  switchType(e) {
    const { type } = e.currentTarget.dataset
    const enableSatellite = type === 'satellite'
    this.setData({
      type,
      'setting.enableSatellite': enableSatellite
    })
  },
})

.wxss

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

.btns {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
}

.btn {
	padding: 4rpx 10rpx;
	background-color: #fff;
	font-size: 30rpx;
	color: #000;
	border: 1rpx solid #000;
}

.btn:last-child {
	border-left: none;
}

.btn.active {
	background-color: #269aea;
	color: #fff;
}