类别:uni-app文档

日期:2020-11-25 浏览:2026 评论:0

  map 地图

属性名 类型 默认值 说明 平台支持
longitude Number  中心经度 
latitude Number  中心纬度 
scale Number 16 缩放级别,取值范围为5-18 markers Array  标记点 
covers Array  即将移除,请使用 markers 
polyline Array  路线 
circles Array  圆 
controls Array  控件 
include-points Array  缩放视野以包含所有给定的坐标点 
show-location Boolean  显示带有方向的当前定位点 
@markertap EventHandle  点击标记点时触发 
@callouttap EventHandle  点击标记点对应的气泡时触发 微信小程序、5+App
@controltap EventHandle  点击控件时触发 
@regionchange EventHandle  视野发生变化时触发 
@tap EventHandle  点击地图时触发 
@updated EventHandle  在地图渲染更新完成时触发 微信小程序

注意:

covers 属性即将移除,请使用 markers 替代
uniapp只支持gcj02坐标

markers

标记点用于在地图上显示标记的位置

属性 说明 类型 必填 备注 平台支持
id 标记点id Number 否 marker点击事件回调会返回此id。建议为每个marker设置上Number类型id,保证更新marker时有更好的性能。 
latitude 纬度 Number 是 浮点数,范围 -90 ~ 90 longitude 经度 Number 是 浮点数,范围 -180 ~ 180 title 标注点名 String 否  
iconPath 显示的图标 String 是 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径 
rotate 旋转角度 Number 否 顺时针旋转的角度,范围 0 ~ 360,默认为 0 alpha 标注的透明度 Number 否 默认1,无透明,范围 0 ~ 1 width 标注图标宽度 Number 否 默认为图片实际宽度 
height 标注图标高度 Number 否 默认为图片实际高度 
callout 自定义标记点上方的气泡窗口 Object 否 支持的属性见下表,可识别换行符。 微信小程序、5+App
label 为标记点旁边增加标签 Object 否 支持的属性见下表,可识别换行符。 微信小程序、5+App
anchor 经纬度在标注图标的锚点,默认底边中点 Object 否 {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点 微信小程序、5+App

marker 上的气泡 callout

属性 说明 类型 平台支持
content 文本 String 微信小程序、5+App
color 文本颜色 String 微信小程序、5+App
fontSize 文字大小 Number 微信小程序、5+App
borderRadius callout边框圆角 Number 微信小程序、5+App
bgColor 背景色 String 微信小程序、5+App
padding 文本边缘留白 Number 微信小程序、5+App
display 'BYCLICK':点击显示; 'ALWAYS':常显 String 微信小程序、5+App
textAlign 文本对齐方式。有效值: left, right, center String 微信小程序、5+App

marker 上的气泡 label

属性 说明 类型 平台支持
content 文本 String 微信小程序、5+App
color 文本颜色 String 微信小程序、5+App
fontSize 文字大小 Number 微信小程序、5+App
x label的坐标,原点是 marker 对应的经纬度 Number 微信小程序、5+App
y label的坐标,原点是 marker 对应的经纬度 Number 微信小程序、5+App
borderWidth 边框宽度 Number 微信小程序、5+App
borderColor 边框颜色 String 微信小程序、5+App
borderRadius 边框圆角 Number 微信小程序、5+App
bgColor 背景色 String 微信小程序、5+App
padding 文本边缘留白 Number 微信小程序、5+App
textAlign 文本对齐方式。有效值: left, right, center String 微信小程序、5+App

polyline
指定一系列坐标点,从数组第一项连线至最后一项

属性 说明 类型 必填 备注 平台支持
points 经纬度数组 Array 是 [{latitude: 0, longitude: 0}] color 线的颜色 String 否 8位十六进制表示,后两位表示alpha值,如:#000000AA 
width 线的宽度 Number 否  
dottedLine 是否虚线 Boolean 否 默认false arrowLine 带箭头的线 Boolean 否 默认false,开发者工具暂不支持该属性 微信小程序、5+App
arrowIconPath 更换箭头图标 String 否 在arrowLine为true时生效 微信小程序、5+App
borderColor 线的边框颜色 String 否  微信小程序、5+App
borderWidth 线的厚度 Number 否  微信小程序、5+App

circles

在地图上显示圆

属性 说明 类型 必填 备注
latitude 纬度 Number 是 浮点数,范围 -90 ~ 90longitude 经度 Number 是 浮点数,范围 -180 ~ 180color 描边的颜色 String 否 8位十六进制表示,后两位表示alpha值,如:#000000AA
fillColor 填充颜色 String 否 8位十六进制表示,后两位表示alpha值,如:#000000AA
radius 半径 Number 是 
strokeWidth 描边的宽度 Number 否

controls
在地图上显示控件,控件不随着地图移动

属性 说明 类型 必填 备注
id 控件id Number 否 在控件点击事件回调会返回此id
position 控件在地图的位置 Object 是 控件相对地图位置
iconPath 显示的图标 String 是 项目目录下的图片路径,支持相对路径写法,以'/'开头则表示相对小程序根目录;也支持临时路径
clickable 是否可点击 Boolean 否 默认不可点击

position

属性 说明 类型 必填 备注
left 距离地图的左边界多远 Number 否 默认为0top 距离地图的上边界多远 Number 否 默认为0width 控件宽度 Number 否 默认为图片宽度
height 控件高度 Number 否 默认为图片高度

地图组件的经纬度必填, 如果不填经纬度则默认值是北京的经纬度。

示例:

<template>
    <view>
        <view class="page-body">
            <view class="page-section page-section-gap">
                <map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
                </map>
            </view>
        </view>
    </view></template>export default {
    data() {
        return {
            title: 'map',
            latitude: 39.909,
            longitude: 116.39742,
            markers: [{
    width : 40,
    height: 40,
                latitude: 39.909,
                longitude: 116.39742,
                iconPath: '../../../static/p.png'
            }]
        }
    },
    methods: {
    }}</script>


本文标题:uni-app 组件 - 地图组件
本文链接:https://vtzw.com/post/453.html
作者授权:除特别说明外,本文由 零一 原创编译并授权 零一的世界 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
 您阅读本篇文章共花了: 

 可能感兴趣的文章

评论区

发表评论 / 取消回复

必填

选填

选填

◎欢迎讨论,请在这里发表您的看法及观点。