<template>
    <div class="stationmap">
        <div  id="map">1111</div>
    </div>
</template>
<script>
import { setTimeout } from 'timers';


export default {
    name: "stationmap1",
    data() {
        return {
            map:null,
            dataList : [
                { title: "名称：广州火车站", point: "116.365, 39.910", address: "广东省广州市广州火车站", type: 1 ,id: '001'},
                { title: "名称：广州塔（赤岗塔）", point: "116.405, 39.980", address: "广东省广州市广州塔（赤岗塔） ", type: 2 ,id: '002'},
                { title: "名称：广州动物园", point: "116.445, 39.940", address: "广东省广州市广州动物园", type: 2 ,id: '003'},
                { title: "名称：天河公园", point: "116.485, 39.920", address: "广东省广州市天河公园", type: 2 ,id: '004'},
                { title: "名称：天河公园", point: "116.405, 39.980", address: "广东省广州市天河公园", type: "2",id: '005' },

            ],
        }
    },
    mounted(){
        this.initFun();
    },
    methods:{
        initFun(){
            this.map = new BMap.Map('map')     // 创建map实例
            var point = new BMap.Point(116.404,39.915)  // 创建点坐标
            this.map.centerAndZoom( point, 12)     // 初始化地图，设置中心点坐标和地图级别
            this.map.enableScrollWheelZoom(true);  // 添加滚轮缩放

            let dataList = this.dataList;
            var markerList = [];
            var pointList = [];

            for (let i = 0; i < dataList.length; i++) {
                // lat(经度),lng (纬度)
                let lng = dataList[i].point.split(',')[0];
                let lat = dataList[i].point.split(',')[1];
                // console.log('lnglnglng---------',lng,lat)
                // map.addOverlay(marker)
                pointList[i] = new BMap.Point(lng,lat)
                // console.log('point--------',pointList[i])
                markerList[i] = new BMap.Marker(pointList[i])
                // console.log('markerList--------',markerList[i])



                // type 1 绘制点
                if (dataList[i].type == 2) {
                    this.drawPointFun(markerList[i],dataList[i],i);
                }


                var polyline = new BMap.Polyline([                  // 创建折线
                    new BMap.Point(116.399, 39.910),
                    new BMap.Point(116.405, 39.920),
                    new BMap.Point(116.423493, 39.907445)
                ],
                {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
                this.map.addOverlay(polyline);   //增加折线
            }

        },

        drawPointFun(marker,val,i){
            // console.log('++++++++++++++++++++++++',marker,val)
            // console.log('markerIdmarkerIdmarkerId',markerId)
            // markerId
            let markerId = val.id;
            // 自定义标注
            var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
            new BMap.Size(23, 25), {
                offset: new BMap.Size(10, 25),
                imageOffset: new BMap.Size(0, 0 - i * 25)
            });
            this.map.addOverlay(marker,{icon: myIcon});      // 增加点
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);      // 跳动的动画


            //监听marker点击后 弹出信息框
            marker.addEventListener("click",function(e){
                // console.log('***********************************************',markerId,e)
            });
        }
    }
}
</script>
<style lang="less" scoped>
    .stationmap{
        width: 100%;
        height: 100%;
        font-size: 0.1rem;
        #map{
            width: 100%;
            height: 100%;
            /*background-color: bisque;*/
        }
    }
</style>
