【微信小程序】地图（97/100）

UI布局

<!--pages/map/map.wxml-->
<view class="page-section page-section-gap">
      <map
        style="width: 100%; height: 600px;"
        latitude="{{latitude}}"
        longitude="{{longitude}}"
      >
        <cover-view class="cover-view">
          <cover-view class="container">
            <cover-view class="flex-wrp" style="flex-direction:row;">
             <cover-view class="flex-item demo-text-1"></cover-view>
              <cover-view class="flex-item demo-text-2"></cover-view>
              <cover-view class="flex-item demo-text-3"></cover-view>
            
            </cover-view>
          </cover-view>
        </cover-view>
      </map>
    </view>

样式

/* pages/map/map.wxss */
.cover-view {
  position: absolute;
  top: calc(50% - 150rpx);
  left: calc(50% - 300rpx);
  /* opacity: .7; */
}

.flex-wrp{
  display:flex;
}

.flex-item{
  width: 200rpx;
  height: 300rpx;
  font-size: 26rpx;
}

.demo-text-1 {
  background: rgba(26, 173, 25, 0.7);
}

.demo-text-2 {
  background: rgba(39, 130, 215, 0.7);
}

.demo-text-3 {
  background: rgba(255, 255, 255, 0.7);
}

数据模型

/**
   * 页面的初始数据
   */
  data: {
    latitude: 23.099994,
    longitude: 113.324520,
  },

小程序解决方案

除本章节介绍的小程序地图基础属性外，腾讯位置服务推出《微信小程序解决方案》，从检索API、基础地图组件、个性化、插件、行业方案等多个层面，为不同场景需求的小程序开发者提供完整的地图能力。

个性化地图

个性化地图样式是腾讯位置服务开放的一项高级能力，开发者可以根据自身产品的使用场景，UI风格， 选取或者创建风格匹配的地图样式。小程序内地图组件应使用同一 subkey，可通过 layer-style（位置服务官网设置的样式 style 编号）属性配置，并支持动态切换样式。 组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。详情见：个性化地图使用指南

• 支持点聚合，适用于 marker 过多场景。
• 支持彩虹蚯蚓线，常用于路线规划场景。
• 覆盖物支持调整与其它地图元素的压盖关系。
• 支持marker（小车）平移动画，适用于轨迹回放场景。

地图基础属性

属性说明
属性 类型 默认值 必填 说明 最低版本
longitude number 是 中心经度 1.0.0

latitude number 是 中心纬度 1.0.0

scale number 16 否 缩放级别，取值范围为3-20 1.0.0

min-scale number 3 否 最小缩放级别 2.13.0

max-scale number 20 否 最大缩放级别 2.13.0

markers Array. 否 标记点 1.0.0

covers Array. 否 即将移除，请使用 markers 1.0.0

polyline Array. 否 路线 1.0.0

circles Array. 否 圆 1.0.0

controls Array. 否 控件（即将废弃，建议使用 cover-view 代替） 1.0.0

include-points Array. 否 缩放视野以包含所有给定的坐标点 1.0.0

show-location boolean false 否 显示带有方向的当前定位点 1.0.0

polygons Array. 否 多边形 2.3.0

subkey string 否 个性化地图使用的key 2.3.0

layer-style number 1 否 个性化地图配置的 style，不支持动态修改

rotate number 0 否 旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 2.5.0

skew number 0 否 倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 2.5.0

enable-3D boolean false 否 展示3D楼块 2.3.0

show-compass boolean false 否 显示指南针 2.3.0

show-scale boolean false 否 显示比例尺，工具暂不支持 2.8.0

enable-overlooking boolean false 否 开启俯视 2.3.0

enable-zoom boolean true 否 是否支持缩放 2.3.0

enable-scroll boolean true 否 是否支持拖动 2.3.0

enable-rotate boolean false 否 是否支持旋转 2.3.0

enable-satellite boolean false 否 是否开启卫星图 2.7.0

enable-traffic boolean false 否 是否开启实时路况 2.7.0

enable-poi boolean true 否 是否展示 POI 点 2.14.0

enable-building boolean 否 是否展示建筑物 2.14.0

setting object 否 配置项 2.8.2

bindtap eventhandle 否 点击地图时触发，2.9.0起返回经纬度信息 1.0.0

bindmarkertap eventhandle 否 点击标记点时触发，e.detail = {markerId} 1.0.0

bindlabeltap eventhandle 否 点击 label 时触发，e.detail = {markerId} 2.9.0

bindcontroltap eventhandle 否 点击控件时触发，e.detail = {controlId} 1.0.0

bindcallouttap eventhandle 否 点击标记点对应的气泡时触发e.detail = {markerId} 1.2.0

bindupdated eventhandle 否 在地图渲染更新完成时触发 1.6.0

bindregionchange eventhandle 否 视野发生变化时触发， 2.3.0

bindpoitap eventhandle 否 点击地图 poi 点时触发，e.detail = {name, longitude, latitude} 2.3.0

bindanchorpointtap eventhandle 否 点击定位标时触发，e.detail = {longitude, latitude} 2.13.0

产品推荐

推荐理由

postman在国内使用已经越来越困难：
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi，满足基本日常开发调试api需求

简介

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具，由于开发人力就作者一个所以人力有限，因此v1.0.0版本功能进行精简，大功能项有：

• api参数填写
• api请求响应数据展示
• PDF形式的分享文档
• Mock本地化解决方案
• api列表数据本地化处理
• 再加上UI方面的打磨

下面是一段smartApi使用介绍：

下载地址：

https://pan.baidu.com/s/1kFAGbsFIk3dDR64NwM5y2A?pwd=csdn