10.地图(midea-circular-map)

谷歌地图组件，在weex侧实现使用Google地图

• Android需要谷歌GMS服务支持且手机处于海外网络，否则无法正确加载地图。

实例

基础用法

<template>
    <midea-circular-map @mapRegionChange="event => {mapRegionChange(event)}" :style="mapStyle" :type="mapType"></midea-circular-map>
</template>
<script>
const mideaCircularMap = weex.requireModule('midea-circular-map');
export default {
    components: { mideaCircularMap },
    data() {
        return {
            mapType: '', // String: ''——电子围栏样式，带圈、蒙层，距离单位切换；'common'——普通地图样式。均支持放大、缩小，回到当前定位
            mapStyle: {
                width: '686px', // 地图组件宽度，必须指定
                height: '1036px', // ios上必须指定组件高度，否则无法正常渲染。
                flex: 1, // Android上设置此样式可自适应高度
            }
        }
    }
    methods: {
        mapRegionChange(event) {
            /* event: {
                city: 城市名,
                address: 当前定位位置信息,
                latitude: Number, // 纬度
                longitude: Number, // 经度
                radius: Number, // 电子围栏范围，单位：米，不受单位切换影响
                timestamp: Number, // 时间戳
                type: 'mapRegionChange', // 常量
            } */
            nativeService.log('地图定位发生了变化', JSON.stringify(event)); // 注意：event对象体量大，必须先stringify后再打印，否则会引起App假死
        }
    }
}
</script>

Attributes

Prop	Type	Required	Default	Description
type	String	Y		地图类型，'': 电子围栏地图，带范围圈；'common': 普通地图
style	Object	Y		地图组件大小样式，具体见上述代码

Events

事件名称	说明	回调参数
mapRegionChange	地图定位发生变化，包括首次加载完成	注1

• 注1 mapRegionChange回调参数

"event": {
    "city": String, // 城市名
    "address": String, // 当前定位位置信息
    "latitude": Number, // 纬度
    "longitude": Number, // 经度
    "radius": Number, // 电子围栏范围，单位：米，不受单位切换影响
    "timestamp": Number, // 时间戳
    "type": 'mapRegionChange', // 常量
}