#Uniapp：map地图组件

  • 开发
  • 48

示例

<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
				}
			]
	}

属性说明

属性名 类型 默认值 说明 平台差异说明
longitude Number 中心经度
latitude Number 中心纬度
scale Number 16 缩放级别，取值范围为3-20 高德地图缩放比例与微信小程序不同
theme String normal 主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持） 京东小程序
min-scale Number 3 最小缩放级别 App-nvue 3.1.0+、微信小程序2.13+
max-scale Number 20 最大缩放级别 App-nvue 3.1.0+、微信小程序2.13+
layer-style Number/String 1 个性化地图 App-nvue 3.1.0+、微信小程序2.13+
markers Array 标记点
polyline Array 路线 飞书小程序不支持
circles Array 圆
controls Array 控件
include-points Array 缩放视野以包含所有给定的坐标点 App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序
enable-3D Boolean false 是否显示3D楼块 App-nvue 2.1.5+、微信小程序2.3.0
show-compass Boolean false 是否显示指南针 App-nvue 2.1.5+、微信小程序2.3.0
enable-zoom Boolean true 是否支持缩放 App-nvue 2.1.5+、微信小程序2.3.0
enable-scroll Boolean true 是否支持拖动 App-nvue 2.1.5+、微信小程序2.3.0
enable-rotate Boolean false 是否支持旋转 App-nvue 2.1.5+、微信小程序2.3.0
enable-overlooking Boolean false 是否开启俯视 App-nvue 2.1.5+、微信小程序2.3.0
enable-satellite Boolean false 是否开启卫星图 App-nvue 2.1.5+、微信小程序2.7.0
enable-traffic Boolean false 是否开启实时路况 App-nvue 2.1.5+、微信小程序2.7.0
enable-poi Boolean false 是否展示 POI 点 App-nvue 3.1.0+
enable-building Boolean false 是否展示建筑物 App-nvue 3.1.0+ 支持 (废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置)
show-location Boolean 显示带有方向的当前定位点 微信小程序、H5、百度小程序、支付宝小程序、京东小程序
polygons（支付宝为: polygon） Array.<polygon> 多边形 App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序
enable-indoorMap Boolean false 是否展示室内地图 App-nvue 3.1.0+
@markertap EventHandle 点击标记点时触发，e.detail = {markerId} App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 （App和H5平台需要指定 marker 对象属性 id）
@labeltap EventHandle 点击label时触发，e.detail = {markerId} 微信小程序2.9.0
@callouttap EventHandle 点击标记点对应的气泡时触发，e.detail = {markerId}
@controltap EventHandle 点击控件时触发，e.detail = {controlId}
@regionchange EventHandle 视野发生变化时触发 微信小程序、H5、百度小程序、支付宝小程序、京东小程序
@tap EventHandle 点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度
@updated EventHandle 在地图渲染更新完成时触发 微信小程序、H5、百度小程序
@anchorpointtap EventHandle 点击定位标时触发，e.detail = {longitude, latitude} App-nvue 3.1.0+、微信小程序2.13+
@poitap EventHandle 点击地图poi点时触发，e.detail = {name, longitude, latitude} 微信小程序2.3.0+
阅读全部

相关推荐

  1. #Uniapp：map地图组件

    2024-01-25 06:24:01       49 阅读

  4. uniapp组件map地图组件使用

    2024-01-25 06:24:01       56 阅读

  7. 【Vue】高德地图API 的组件封装

    2024-01-25 06:24:01       45 阅读

  8. uni-app根据腾讯地图接口三级联动组件

    2024-01-25 06:24:01       49 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-25 06:24:01       94 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-25 06:24:01       100 阅读

  9. 在Django里面运行非项目文件

    2024-01-25 06:24:01       82 阅读

  19. Python语言-面向对象

    2024-01-25 06:24:01       91 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-01-25 06:24:01       85 阅读

热门阅读

  3. tomcat与Apache---一起学习吧之服务器

    2024-01-25 06:24:01       60 阅读

  4. 网络原理——应用层

    2024-01-25 06:24:01       42 阅读

  5. freeswitch中通过嵌入式脚本监听会议事件

    2024-01-25 06:24:01       50 阅读

  13. GO 的 Web 开发系列（二）—— Web 项目的技术框架选择和项目搭建

    2024-01-25 06:24:01       57 阅读

  14. 解析GPT-3、GPT-4和ChatGPT关系-迈向自然语言处理的新高度“

    2024-01-25 06:24:01       50 阅读

  15. 多旋翼无人机调试问题分析

    2024-01-25 06:24:01       59 阅读

  25. python基础 - 变量

    2024-01-25 06:24:01       49 阅读

  29. 前端常见安全问题以及解决方案汇总

    2024-01-25 06:24:01       53 阅读

  30. 机器学习 -- 支持向量机

    2024-01-25 06:24:01       55 阅读