vue地图易-封装组件

项目需求：

数据没有经纬度，展示廊坊市地图；存在标记；

<template>
  <div id='MapBox'>
    <div class='mapDiv' :id='params.id' ref="mapShow"></div>
  </div>
</template>

<script>
    let tileServiceUrl = `${window._CONFIG['tileServiceUrl']}`
    export default {
        name: "yiMap",
        props:{
            params: {
                type: Object
            }
        },
        data() {
            return{
                map: undefined,
                marker:undefined
            }
        },
        mounted(){
            this.$nextTick(() => {
                this.initMap();
            })
        },
        methods:{
            initMap(){
                //没有经纬度-默认廊坊地图
                let lat = this.params.lat != '-' ? this.params.lat : ('39.52');
                let long =  this.params.long != '-' ? this.params.long : ('116.70');
                // 创建地图对象
                this.map = W.map(this.params.id, {
                    center:[lat,long],
                    zoom:this.params.lat != '-' && this.params.long != '-' ? 15 : 11
                });
                //创建一个底图，并添加到map中
                let baseLayer = W.tileLayer(tileServiceUrl).addTo(this.map);
                if (this.params.lat != '-' && this.params.long != '-'){
                    //创建一个marker,并添加到地图上
                    this.marker = W.marker([lat,long]).addTo(this.map);
                }
            }
        },
    }
</script>
<style>
  #MapBox {
    width: 100%;
    height: calc(100vh - 217px);
    padding: 10px;
    position: relative;
  }
  /* 地图 */
  .mapDiv{
    height: 100%;
    width: 100%;
  }
</style>