地图

<map>定义一个地图

属性

属性名	类型	例子	说明
center	array	[116.487, 40.00003]	传入地理位置坐标[x,y] 默认为当前定位位置
zoom	number	11	缩放级别
zoomEnable	boolean	true	是否允许缩放
marker	array	[{position:[116,12]}]	点标记物的属性
geolocation	boolean	true	添加定位控件
sdkKey	object	{ios:'xxx',android: 'xxx',h5: 'xxx'}	指定开发者的 SDK 密匙

事件

事件	描述
zoomchange	用户缩放改变
dragend	用户拖拽完成

代码展示

<template>
    <div class="container">
        <navbar
                title="地图"
                titleColor="#fff"
                height="100px"
                backgroundColor="#E30C26"
                leftItemSrc="assets://back"
                :closeFlag = "false"
        ></navbar>
        <map class="map" ref="map2017" :sdk-key="keys" :zoom="zoom" geolocation="true" :center="pos">
        </map>
    </div>
</template>

<style scoped>
    .container{
        position: relative;
        flex:1;
        background-color: #fff;
    }
    .map{
        flex: 1;
        position: relative;
        background-color: #fff;
        min-height: 800px;
        border-bottom-width: 10px;
        border-bottom-color: #fff;
    }
</style>

<script>
    var modal = weex.requireModule('modal');
    var map = weex.requireModule('mapApi');
    import Comp from 'ums_comp';
    import ums_api from 'ums_api';

    console.log("map: "+Object.keys(map));

    module.exports = {
        components: {
            navbar: Comp.navbar
        },
        data(){
            return  {
                keys:{
                    h5: 'f4b99dcd51752142ec0f1bdcb9a8ec02',
//                    h5: '63758b666fa2b5540c36edf99a78d0c3',
                    ios: '',
                    android: 'db6a973159cb0c2639ad02c617a786ae'
                },
                pos: [121.610729,31.19275],
                zoom: 9,
                pointArr: [{
                    position: [121.610729,31.19275],
                    title: '惠生科技园',
                    events: {
                        click: function () {
                            modal.alert('惠生科技园');
                        }
                    }
                }]
            }
        },
        methods: {
            markerClick() {
                modal.alert({
                    message: 'marker clicked!'
                });
            },
        },
        created(){
            ums_api.geolocation.get().then(function(ret){
                console.log(ret);
            });

            let dd =map.getUserLocation((val)=>{
                console.log("result: "+val.result+" position: "+val.data.position)
            },(err)=>{
                console.log(">>>>>>>>>>>>>>>>>>   "+err);
            })
            console.log("dd  "+dd);
        }
    };
</script>

# 地图

# 属性

# 事件

# 代码展示

# 效果展示

地图

属性

事件

代码展示

效果展示