# 地图上的标注

<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-marker :position="point.position" :title="point.title" :icon="point.icon" v-for="(point,index) in pointArr" @click.native="markerClick" :key="index"></map-marker>
        </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>