map

概述

地图组件。

使用限制

子组件

仅支持<custommarker>子组件。

属性

除了支持 通用属性 以外，还支持如下属性。

markers子属性：

markers-callout子属性：

markers-label子属性（1040+）：

polylines子属性：

polygons子属性：

circles子属性：

groundoverlays子属性：

controls子属性：

controls-position子属性：

样式

<map> 除了支持 通用样式 以外，还支持如下样式

事件

<map> 除了支持 通用事件 以外，还支持如下事件。

方法

通过如下方法，可以对 <map> 进行操作。

getCenterLocation的OBJECT参数列表：

translateMarker的OBJECT参数列表：

includePoints的OBJECT参数列表：

getRegion的OBJECT参数列表：

getScale的OBJECT参数列表：

getCoordType的OBJECT参数列表：

convertCoord的OBJECT参数列表：

poitap的OBJECT参数列表：

setScalePosition的OBJECT参数列表（1070+）

setZoomPosition的OBJECT参数列表（1070+)

setCompassPosition的OBJECT参数列表（1070+)

setMaxAndMinScaleLevel的OBJECT参数列表(1072+)

示例代码

[h2]常用属性和方法

//latitude            中心纬度
//longitude           中心经度
//coordtype           中心坐标的坐标系
//scale               缩放级别
//rotate              逆时针旋转角度
//loaded              地图渲染更新完成时触发
//regionchange        视野发生变化时触发
//tap                 点击地图时触发
//getCenterLocation   获取地图中心点坐标
//getRegion           获取当前地图视野范围
//getScale            获取地图的缩放级别
//getCoordType        获取地图当前使用的坐标系
//convertCoord        对坐标的坐标系进行转换
<template>
<div class="item-container">
<map class="map" id = 'mapid' latitude=39.906901 longitude=116.397972 coordtype="gcj02" scale = 11
rotate=0 @loaded="loaded" @regionchange="regionchange" @tap="tap"></map>
<input type="button" class="btn" onclick="gotoGetCenter" value="获取中心点" />
<input type="button" class="btn" onclick="gotoGetRegion" value="获取视野范围" />
<input type="button" class="btn" onclick="gotoGetScale" value="获取地图缩放级别" />
<input type="button" class="btn" onclick="gotoGetCoordType" value="获取当前坐标系" />
<input type="button" class="btn" onclick="gotoConvertCoord" value="转换坐标系" />
</div>
</template>
<style>
.item-container {
    flex-direction: column;
}
.btn {
    height: 80px;
    text-align: center;
    border-radius: 5px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
}
.map {
    background-color: #a9a9a9;
    width: 750px;
    height: 750px;
}
#mapid {
}
</style>
<script>
module.exports = {
    data: {
    },
    loaded () {
        console.log('map has been loaded')
    },
    regionchange (event) {
        console.log('map regionchange' + " northeast latitude " + event.northeast.latitude + " northeast longitude " + event.northeast.longitude + " southwest.latitude " + event.southwest.latitude + " southwest.longitude " + event.southwest.longitude + " causeBy " + event.causeBy)
    },
    tap (event) {
        console.log('map tap' + " latitude " + event.latitude + " longitude " + event.longitude)
    },
    gotoGetCenter() {
        var mapcom = this.$element('mapid')
        mapcom.getCenterLocation({
            success:function(data) {
                console.log("getCenterLocation latitude = " + data.latitude + " longitude = " + data.longitude);
            },
            fail:function() {
                console.log("getCenterLocation fail");
            },
            complete:function() {
                console.log("getCenterLocation complete");
            }
        })
    },
    gotoGetRegion() {
        var mapcom = this.$element('mapid')
        mapcom.getRegion({
            success:function(data) {
                console.log("getRegion southwest = " + data.southwest + " northeast = " + data.northeast);
            },
            fail:function() {
                console.log("getRegion fail");
            },
            complete:function() {
                console.log("getRegion complete");
            }
        })
    },
    gotoGetScale() {
        var mapcom = this.$element('mapid')
        mapcom.getScale({
            success:function(data) {
                console.log("getScale scale = " + data.scale);
            },
            fail:function() {
                console.log("getScale fail");
            },
            complete:function() {
                console.log("getScale complete");
            }
        })
    },
    gotoGetCoordType() {
        var mapcom = this.$element('mapid')
        mapcom.getCoordType({
            success:function(data) {
                console.log("getCoordType coordtype = "+data.coordtype);
            },
            fail:function() {
                console.log("getCoordType fail");
            },
            complete:function() {
                console.log("getCoordType complete");
            }
        })
    },
    gotoConvertCoord() {
        var mapcom = this.$element('mapid')
        mapcom.convertCoord({
            from:'wgs84',
            to:'gcj02',
            latitude:39.747872,
            longitude:116.438955,
            success:function(data) {
                console.log("convertCoord latitude = " + data.latitude + " longitude = " + data.longitude);
            },
            fail:function() {
                console.log("convertCoord fail");
            },
            complete:function() {
                console.log("convertCoord complete");
            }
        })
    }
}
</script>

示例代码效果图：

[h2]定位点的属性和方法

//showmylocation          显示带有方向的当前定位点
//mylocation              简写属性，在一个声明中设置所有的mylocation属性，可以按顺序设置属性mylocation-fill-color mylocation-stroke-color mylocation-icon-path
//mylocation-fill-color       定位精度圈填充颜色
//mylocation-stroke-color     定位精度圈描边颜色
//mylocation-icon-path        标记图标资源的本地绝对路径
//moveToMyLocation            将地图中心点移动到当前位置坐标
<template>
<div class="item-container">
<map class="map lc2" id = 'mapid' showmylocation='true'></map>
<input type="button" class="btn" onclick="moveTo" value="移动视角到当前位置" />
</div>
</template>
<style>
.item-container {
    flex-direction: column;
}
.btn {
    height: 80px;
    text-align: center;
    border-radius: 5px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
}
.map {
    background-color: #a9a9a9;
    width: 750px;
    height: 750px;
}
#mapid {
}
.lc1 {
    mylocation:rgba(255, 0, 255, 0.5) rgba(255, 255, 0, 1) url(/Common/logo.png)
}
.lc2 {
    mylocation-fill-color:rgba(255, 0, 255, 0.5);
    mylocation-stroke-color:rgba(255, 255, 0, 1);
    mylocation-icon-path:url(/Common/logo.png);
}
</style>
<script>
module.exports = {
    data: {
    },
    moveTo() {
    var mapcom = this.$element('mapid')
    mapcom.moveToMyLocation()
    }
}
</script>

示例代码效果图：

包含特定点的属性和方法

//includepoints           缩放视野以包含所有给定的坐标点
//includePoints           改变地图视角，展示所有给定坐标点
<template>
<div class="item-container">
<map class="map" id = 'mapid' latitude=39.906901 longitude=116.397972 includepoints={{tincludepoints}}></map>
<input type="button" class="btn" onclick="gotoInclude" value="包含某个地点" />
</div>
</template>
<style>
.item-container {
    flex-direction: column;
}
.btn {
    height: 80px;
    text-align: center;
    border-radius: 5px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
}
.map {
    background-color: #a9a9a9;
    width: 750px;
    height: 750px;
}
#mapid {
}
</style>
<script>
module.exports = {
    data: {
    tincludepoints:[{latitude: 39.074112, longitude: 116.686649}]
},
gotoInclude() {
    var mapcom = this.$element('mapid')
    mapcom.includePoints({
        points:[{latitude:38.406665,longitude:116.995047,coordType:'gcj02'}],padding:"10px 0px 0px 10px",
        success:function() {
            console.log("includePoints success");
        },
        fail:function() {
            console.log("includePoints fail");
        },
        complete:function() {
            console.log("includePoints complete");
        }
        })
    }
}
</script>

示例代码效果图：

[h2]贴图

//groundoverlays       贴图
<template>
<div class="item-container">
<map class="map" latitude=39.906901 longitude=116.397972 groundoverlays={{tgroundlay}}></map>
</div>
</template>
<style>
.item-container {
    flex-direction: column;
}
.map {
    background-color: #a9a9a9;
    width: 750px;
    height: 750px;
}
</style>
<script>
module.exports = {
    data: {
    tgroundlay: [{ 'id': 1, southWest: { latitude: 39.906901, longitude: 116.397972, coordType:'gcj02'},
        northEast: { latitude: 39.776909, longitude: 116.596205, coordType:'gcj02'},
        iconPath: '/Common/logo.png', visible: true, zIndex: 3, opacity: 1}]
    }
}
</script>

示例代码效果图：

[h2]地图画圆

//circles        地图上显示圆
<template>
<div class="item-container">
<map class="map" latitude=39.906901 longitude=116.397972 circles={{tcircles}}></map>
</div>
</template>
<style>
.item-container {
    flex-direction: column;
}
.map {
    background-color: #a9a9a9;
    width: 750px;
    height: 750px;
}
</style>
<script>
module.exports = {
    data: {
        tcircles: [{ latitude: 39.806901, longitude: 116.597972, borderColor: '#ff0000', borderWidth: '15px',zIndex:20,
        fillColor: '#EE7AE9', radius: 3500, strokeWidth: 15 }]
    }
}
</script>

示例代码效果图：

[h2]路线

// polylines      路线
<template>
<div class="item-container">
<map class="map" latitude=39.906901 longitude=116.397972 polylines={{tpolylines}}></map>
</div>
</template>
<style>
.item-container {
    flex-direction: column;
}
.map {
    background-color: #a9a9a9;
    width: 750px;
    height: 750px;
}
</style>
<script>
module.exports = {
    data: {
        tpolylines:[{
            points:[{latitude:39.906901,longitude:116.397972,coordType:'gcj02'},
            {latitude:39.074112,longitude:116.686649,coordType:'gcj02'},
            {latitude:38.406665,longitude:116.995047,coordType:'gcj02'},
            {latitude:38.406665,longitude:116.995047,coordType:'gcj02'}],
            color:'#EE7AE9',dotted:true,width:'15px'
        }]
    }
}
</script>

示例代码效果图：

[h2]带箭头纹理的线

<template>
    <div class="item-container">
        <map class="map" latitude=39.906901 longitude=116.397972 polylines={{tpolylines}}></map>
    </div>
</template>
<style>
    .item-container {
        flex-direction: column;
    }
    .map {
        background-color: #a9a9a9;
        width: 750px;
        flex: 1;
    }
</style>
<script>
    module.exports = {
        data: {
            tpolylines:[{
                points:[{latitude:39.906901,longitude:116.397972,coordType:'gcj02'},
                {latitude:39.504112,longitude:116.686649,coordType:'gcj02'}],
                color:'#EE7AE9',dotted:true,width:'15px',
                arrowLine:true,arrowIconPath:'/Common/logo.png'
            },
            {
                points:[{latitude:39.504112,longitude:116.686649,coordType:'gcj02'},
                {latitude:39.206665,longitude:116.595047,coordType:'gcj02'}],
                color:'#EE7AE9',dotted:false,width:'15px',
                arrowLine:true
            }]
        }
    }
</script>

示例代码效果图：

[h2]绘制多边形

<template>
    <div class="item-container">
        <map class="map" latitude=39.906901 longitude=116.397972 polygons={{tpolygones}}></map>
    </div>
</template>
<style>
    .item-container {
        flex-direction: column;
    }
    .map {
        background-color: #a9a9a9;
        width: 750px;
        flex: 1;
    }
</style>
<script>
    module.exports = {
        data: {
            tpolygones:[{
                points:[{latitude:39.906901,longitude:116.397972,coordType:'gcj02'},
                {latitude:39.506901,longitude:116.097972,coordType:'gcj02'},
                {latitude:39.006901,longitude:115.597972,coordType:'gcj02'}],
                strokeWidth:'5px',strokeColor:'red',fillColor:'yellow'
            }]
        }
    }
</script>

示例代码效果图：

[h2]控件属性和方法

//controls         控件
//controltap       点击控件触发
<template>
<div class="item-container">
<map class="map" id = 'mapid' latitude=39.906901 longitude=116.397972 controls={{tcontrols}} @controltap="controltap"></map>
</div>
</template>
<style>
.item-container {
    flex-direction: column;
}
.btn {
    height: 80px;
    text-align: center;
    border-radius: 5px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
}
.map {
    background-color: #a9a9a9;
    width: 750px;
    height: 750px;
}
#mapid {
}
</style>
<script>
module.exports = {
    data: {
        tcontrols:[{id: 1,position:              {left:'20px',top:'20px',width:'150px',height:'150px'},iconPath:'/Common/logo.png',clickable:true},
{id: 2,position: {left:'20px',bottom:'20px',width:'150px',height:'150px'},iconPath:'/Common/logo.png',clickable:true},
{id: 3,position: {right:'20px',top:'20px',width:'150px',height:'150px'},iconPath:'/Common/logo.png',clickable:true},
{id: 4,position: {right:'20px',bottom:'20px',width:'150px',height:'150px'},iconPath:'/Common/logo.png',clickable:true}]
},
        controltap (event) {
            console.log('controltap id:' + event.id)
        }
}
</script>

示例代码效果图：

[h2]marker属性和方法

//markers            用于标记地图上的点
//markertap          点击地图标记点时触发
//callouttap         点击标记点对应弹窗触发
//translateMarker    在地图上移动marker
<template>
<div class="item-container">
<map class="map" id = 'mapid' latitude=39.906901 longitude=116.397972 markers={{tmarkers}} @markertap="markertap"
@callouttap="callouttap"></map>
<input type="button" class="btn" onclick="translate" value="移动Marker" />
</div>
</template>
<style>
.item-container {
    flex-direction: column;
}
.btn {
    height: 80px;
    text-align: center;
    border-radius: 5px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
}
.map {
    background-color: #a9a9a9;
    width: 750px;
    height: 750px;
}
#mapid {
}
</style>
<script>
module.exports = {
    data: {
        tmarkers:[{id: 1,latitude: 39.906901,longitude: 116.397972,coordtype: "gcj02",title: "marker1",iconPath: "/Common/logo.png",opacity: 1,rotate: 90,width: '100px',height: '100px',
anchor:{x: 0.5,y: 0.5},callout: {content: "hello world",color: '#EE7AE9',fontSize: 50,borderRadius: '10px',padding: '5px',backgroundColor: '#a9a9a9',display: "byclick",textAlign: "left"}
    },{id: 2,latitude: 39.074112,longitude: 116.686649,coordtype: "gcj02",title: "marker1",
iconPath: "/Common/logo.png",opacity: 1,rotate: 90,width: '200px',height: '200px',anchor:{x: 0.5,y: 0.5},callout: {content: "hello cbg",color: '#EE7AE9',fontSize: 50,borderRadius: '10px',padding: '5px',backgroundColor: '#a9a9a9',display: "byclick",textAlign: "left"}
        }]
    },
    markertap (event) {
        console.log('markertap id:' + event.id)
        this.markerid = event.id
    },
    callouttap (event) {
        console.log('callouttap id:' + event.id)
        this.calloutid = event.id
    },
    translate() {
        var mapcom = this.$element('mapid')
        mapcom.translateMarker({
            markerId: 2,
            destination: {latitude:39.490833,longitude:116.255255},
            autoRotate: true,
            rotate: 180,
            duration: 10000,
            animationend() {
                console.log("animationEnd");
            },
            success:function() {
                console.log("translateMarker success");
            },
            fail:function() {
                console.log("translateMarker fail");
            },
            complete:function() {
                console.log("translateMarker complete");
            }
        })
    }
}
</script>

示例代码效果图：

[h2]地图支持指南针和手势控制

<template>
<div class="item-container">
<map class="map" latitude=39.906901 longitude=116.397972 showcompass={{tshowcompass}}
enableoverlooking={{tenableoverlooking}} enablezoom={{tenablezoom}}
enablescroll={{tenablescroll}} enablerotate={{tenablerotate}}></map>
<input type="button" class="btn" value="showcompass" onclick="changeshowcompass"/>
<input type="button" class="btn" value="enableoverlooking" onclick="changeenableoverlooking"/>
<input type="button" class="btn" value="enablezoom" onclick="changeenablezoom"/>
<input type="button" class="btn" value="enablescroll" onclick="changeenablescroll"/>
<input type="button" class="btn" value="enablerotate" onclick="changeenablerotate"/>
</div>
</template>
<style>
.item-container {
    flex-direction: column;
}
.btn {
    height: 80px;
    text-align: center;
    border-radius: 5px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
}
.map {
    background-color: #a9a9a9;
    width: 750px;
    height: 750px;
}
</style>
<script>
module.exports = {
    data: {
        tshowcompass:true,
        tenableoverlooking:false,
        tenablezoom:true,
        tenablescroll:true,
        tenablerotate:true
    },
    changeshowcompass() {
        if (this.tshowcompass) {
            this.tshowcompass = false
        } else {
            this.tshowcompass = true
        }
    },
    changeenableoverlooking() {
        if (this.tenableoverlooking) {
            this.tenableoverlooking = false
        } else {
            this.tenableoverlooking = true
        }
    },
    changeenablezoom() {
        if (this.tenablezoom) {
            this.tenablezoom = false
        } else {
            this.tenablezoom = true
        }
    },
    changeenablescroll() {
        if (this.tenablescroll) {
            this.tenablescroll = false
        } else {
            this.tenablescroll = true
        }
    },
    changeenablerotate() {
        if (this.tenablerotate) {
            this.tenablerotate = false
        } else {
            this.tenablerotate = true
        }
    }
}
</script>

示例代码效果图：

[h2]标记点文本弹窗以html展示和在标记点周边展示文本

记点文本弹窗以html展示和在标记点周边展示文本
<template>
<div class="item-container">
<map class="map" id = 'mapid' latitude=39.906901 longitude=116.397972 markers={{tmarkers}} @markertap="markertap"
@callouttap="callouttap"></map>
<input type="button" class="btn" onclick="translate" value="移动Marker" />
</div>
</template>
<style>
.item-container {
    flex-direction: column;
}
.btn {
    height: 80px;
    text-align: center;
    border-radius: 5px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
}
.map {
    background-color: #a9a9a9;
    width: 750px;
    height: 1000px;
}
#mapid {
}
.t1 {
    font-size: 25px;
}
</style>
<script>
module.exports = {
    data: {
        tmarkers:[{id: 1, latitude: 39.806901,longitude: 116.367972,coordtype: "gcj02",title: "marker1",
        iconPath: "/Common/logo.png",opacity: 1,rotate: 90,width: '100px',height: '100px',
        anchor:{x: 0.5,y: 0.5},
        callout: {content: "<html><body>这是<font color=\"#ff0000\"><strong>html格式</strong></font>的文本弹框</body></html>",
        color: '#000000',fontSize: "20px",borderRadius: "15px",
        backgroundColor: '#dcdcdc',display: "byclick",textAlign: "left",
        convertHtml:true},
        label: {
            content:"快餐店",color:'#ff0000',fontSize: '20px'}
        },
        {id: 2,latitude: 39.570112,longitude: 116.37666,coordtype: "gcj02",title: "marker1",
        iconPath: "/Common/logo.png",opacity: 1,rotate: 90,width: '100px',height: '100px',
        anchor:{x: 0.5,y: 0.5},
        callout: {content: "这是普通格式的文本弹框",
        color: '#000000',fontSize: "20px",borderRadius: "15px",
        backgroundColor: '#dcdcdc',display: "byclick",textAlign: "left"},
        label: {
            content:"饮品店",color:'#ff0000',fontSize: '20px'}
        }]
    },
    markertap (event) {
        console.log('markertap id:' + event.markerId)
        this.markerid = event.markerId
    },
    callouttap (event) {
        console.log('callouttap id:' + event.markerId)
        this.calloutid = event.markerId
    },
    translate() {
        var mapcom = this.$element('mapid')
        mapcom.translateMarker({
            markerId: 2,
            destination: {latitude:39.490833,longitude:116.255255},
            autoRotate: true,
            rotate: 180,
            duration: 10000,
            animationend() {
                console.log("animationEnd");
            },
            success:function() {
                console.log("translateMarker success");
            },
            fail:function() {
                console.log("translateMarker fail");
            },
            complete:function() {
                console.log("translateMarker complete");
            }
        })
    }
}
</script>

示例代码效果图：

版本更新说明

相关链接

[h2]FAQ

• 快应用引擎对使用map组件，调用地理位置接口时获取的经纬度精度是如何处理的？
• 地图组件map的marker属性如何动态更新？
• map组件如何添加可以响应点击事件的自定义控件？
• map地图如何实现最佳视图窗口？
• map地图如何实现展示当前位置？

[h2]案例

• map组件如何实现物体的移动动画
• map组件如何使用markers的callout属性实现弹框
• 如何实现map地图上点的文本弹框跟随点的位置变化