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

UI布局

<!--pages/map/map.wxml-->
<view class="page-section page-section-gap"><mapstyle="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