微信小程序地图控件Map的简单配置及使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序地图控件Map的简单配置及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果如下

.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;
}