#Uniapp:map地图组件

本文详细描述了地图类API中关于经纬度、缩放、标记点和各种地图特性(如3D视图、指南针等)的属性设置,以及在不同平台(如微信小程序和高德地图)上的差异和事件处理函数。
摘要由CSDN通过智能技术生成

示例

<map class="map" :latitude="mapOptions.latitude" :longitude="mapOptions.longitude" :scale="mapOptions.scale"
:markers="mapOptions.markers"></map>
mapOptions: {
			longitude: '108.95', // 中心经度
			latitude: '34.22', // 中心纬度
			scale: 15, // 缩放等级
			markers: [ //  标记点
				{
					id: 1,
					longitude: '108.95', // 中心经度
					latitude: '34.22', // 中心纬度
					iconPath: '../../static/logo.png',
					width: 30,
					height: 30
				}
			]
	}

属性说明

属性名类型默认值说明平台差异说明
longitudeNumber中心经度
latitudeNumber中心纬度
scaleNumber16缩放级别,取值范围为3-20高德地图缩放比例与微信小程序不同
themeStringnormal主题(satellite 或 normal)只在初始化时有效,不能动态变更(仅Android支持)京东小程序
min-scaleNumber3最小缩放级别App-nvue 3.1.0+、微信小程序2.13+
max-scaleNumber20最大缩放级别App-nvue 3.1.0+、微信小程序2.13+
layer-styleNumber/String1个性化地图App-nvue 3.1.0+、微信小程序2.13+
markersArray标记点
polylineArray路线飞书小程序不支持
circlesArray
controlsArray控件
include-pointsArray缩放视野以包含所有给定的坐标点App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序
enable-3DBooleanfalse是否显示3D楼块App-nvue 2.1.5+、微信小程序2.3.0
show-compassBooleanfalse是否显示指南针App-nvue 2.1.5+、微信小程序2.3.0
enable-zoomBooleantrue是否支持缩放App-nvue 2.1.5+、微信小程序2.3.0
enable-scrollBooleantrue是否支持拖动App-nvue 2.1.5+、微信小程序2.3.0
enable-rotateBooleanfalse是否支持旋转App-nvue 2.1.5+、微信小程序2.3.0
enable-overlookingBooleanfalse是否开启俯视App-nvue 2.1.5+、微信小程序2.3.0
enable-satelliteBooleanfalse是否开启卫星图App-nvue 2.1.5+、微信小程序2.7.0
enable-trafficBooleanfalse是否开启实时路况App-nvue 2.1.5+、微信小程序2.7.0
enable-poiBooleanfalse是否展示 POI 点App-nvue 3.1.0+
enable-buildingBooleanfalse是否展示建筑物App-nvue 3.1.0+ 支持 (废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置)
show-locationBoolean显示带有方向的当前定位点微信小程序、H5、百度小程序、支付宝小程序、京东小程序
polygons(支付宝为: polygon)Array.<polygon>多边形App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序
enable-indoorMapBooleanfalse是否展示室内地图App-nvue 3.1.0+
@markertapEventHandle点击标记点时触发,e.detail = {markerId}App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 (App和H5平台需要指定 marker 对象属性 id)
@labeltapEventHandle点击label时触发,e.detail = {markerId}微信小程序2.9.0
@callouttapEventHandle点击标记点对应的气泡时触发,e.detail = {markerId}
@controltapEventHandle点击控件时触发,e.detail = {controlId}
@regionchangeEventHandle视野发生变化时触发微信小程序、H5、百度小程序、支付宝小程序、京东小程序
@tapEventHandle点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度
@updatedEventHandle在地图渲染更新完成时触发微信小程序、H5、百度小程序
@anchorpointtapEventHandle点击定位标时触发,e.detail = {longitude, latitude}App-nvue 3.1.0+、微信小程序2.13+
@poitapEventHandle点击地图poi点时触发,e.detail = {name, longitude, latitude}微信小程序2.3.0+
  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值