#Uniapp：map地图组件

发布时间：2024年01月24日

示例

<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+
文章来源:https://blog.csdn.net/weixin_47075554/article/details/135823507
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章