地图组件

map 地图
属性名 类型 默认值

注意：

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

makers
记点用于在地图上显示标记的位置
属性 说明 类型 必填 备注 平台支持

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
指定一系列坐标点，从数组第一项连线至最后一项

circles
在地图上显示圆

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

**position

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

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