vue中天地圖使用實例

<style>
    .mapContent{
        position: relative;
    }
    .menuMap{
        position: absolute;
        top: 10px;
        left: 200px;
        z-index: 100;
        width: 690px;
    }
    .menuMap .ivu-btn{
        padding: 0 15px;
        height: 40px;
        /* background: url(../../images/iconMap01.png) no-repeat 0 0 #f1f1f1; */
    }
    .menuMap .ivu-btn span{
        display: block;
        line-height: 12px;
    }
    .menuMap .ivu-btn span p{
        font-size: 12px
    }
    .menuMap .ivu-input-group, .menuMap .ivu-input-group .ivu-input{
        height: 39px;
    }
    .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }
    .radioList .ivu-radio-group{
        height: 40px;
    }
    .radioList .ivu-radio-wrapper{
        height: 100%;
        line-height: 10px
    }
    /* .radioList .ivu-radio-group-button .ivu-radio-wrapper-checked{
        
    } */
    .alertPos{
        position: absolute;
        bottom: -10px;
        left: 15px;
        z-index: 100;
        width: 300px;
    }
    .alertPos ul li,.qixiangPos ul li{
        list-style-type: none
    }
    .qixiangPos{
        position: absolute;
        top: 60px;
        left: 15px;
        width: 300px;
    }
    .mapDiv{
        width: 100%;
        height: 85vh;
        z-index:0;
}
</style>
<template>
    <div>
            <Col>
                <div id="mapDiv" style="min-height: 730px;">
                   
                </div>
              
    </div>
</template>

<script>
import Vue from 'vue';

import BaiduMap from '../../../build/js'//必須引入的
export default {
	components: {
        addPeoples,
        formUpImgIdentity,
        PlantFormUpImgS
    },
    name: 'editAcre',
    data () {
        return {
            polygonTool:'',
            zoom: '11',
            points: [],
            line: '',
            T: '',
            lay: '',
            map: '',
            drivingRoute: '',
            _CarTrack: '',
            onDrawPolygon:"",
            config: '',
            iconMaker: [],
            
            latitude:'',
            longtitude:"",
            value11: '',
            modal: false,
            modal2: false,
            modal4: false,
            modal5: false,
            modal6: false,
            modal7: false,
            imgShow: false,
            single: false,
            modal_loading: false,
            styles: {
                height: 'calc(100% - 55px)',
                overflow: 'auto',
                paddingBottom: '53px',
                position: 'static'
            },
            index: 1,
            formData2: {
                color: '',
                diaphaneity: 100,
            },
            markersArray: [],
            formData4: {},
            formData5: {},
            formData6: {},
            peasantList: [],
            principalList: [],
            alertPosCon: [],
            modalObj: {},
            cameraList: {},
            shebei: {},
            urllist:[
                {
                    lat:'',
                    lng:''
                }
            ]
        }
    },created(){
        if(location.href.indexOf('#reloaded')==-1){
            location.href=location.href+"#reloaded";
            location.reload();
        }
    },
    methods: {
        init() {
            if(this.$route.params.id != undefined) {
                this.modal2 = true
                //獲取地塊列表
                this.$http.get('soil/findById/'+this.$route.params.id).then((res) => {
                    this.formData2 = res.data
                    this.formData2.type = res.data.type.toString()
                    this.formData2.diaphaneity = parseInt(res.data.diaphaneity)
                    // console.log(res.data.coordinate)
                    if(res.data.coordinate != ''){
                        var zb = JSON.parse(res.data.coordinate)
                        // console.log(zb)
                        this.longtitude = zb[0].lng
                        this.latitude = zb[0].lat
                        this.urllist = zb
                        // localStorage.setItem()
                    }
                })


      
            }
            BaiduMap.init()
        .then((T) => {
           
          this.T = T
          this.zoom = 12
    
     
        // this.latitude = localStorage.getItem("latitude")
          this.map = new T.Map('mapDiv')// 初始化地圖對象
          this.map.centerAndZoom(new T.LngLat(this.longtitude,this.latitude), 12)// 設置顯示地圖的中心點和級別

           //創建對象
            // var ctrl = new T.Control.MapType();
            //添加控件
            this.map.addControl(TMAP_HYBRID_MAP);
          // 創建圖片對象
          var icon = new T.Icon({
            iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png',
            iconSize: new T.Point(19, 27),
            iconAnchor: new T.Point(10, 25)
          })
        var config = {  
        strokeColor:"blue", //折線顏色  
        fillColor:"blue",    //填充顏色。當參數爲空時，折線覆蓋物將沒有填充效果  
        strokeWeight:"3px", //折線的寬度，以像素爲單位  
        strokeOpacity:0.5,  //折線的透明度，取值範圍0 - 1  
        fillOpacity:0.5, //填充的透明度，取值範圍0 - 1  
        showLabel:true  //是否顯示頁面，默認爲true
      }; 
      this.polygonTool = new T.PolygonTool(this.map,config);  
          var line = new T.Polygon(this.urllist, { color: 'blue' })
  
          this.map.addOverLay(line)


        })
          
        init1(val) {
         
        },
        init2(val){
           
        },
      
      
        showLonLat(arr){
            arr.map(item=>{
                this.markersArray.push({
                    lat:item.lat(),
                    lng:item.lng(),
                })
            })
         
        },
        // 父組件接收子組件的值
        childChick(obj) {
            // console.log(obj,1111)
            if (obj==true) {
                this.modal = false
                this.init();
            }
        },
        addListRow2() {
            this.urllist.push({
                lat: '',
                lng: '',
            });
        },
        deleteListRow2() {
            if(this.urllist.length > 3){
                this.urllist.splice(this.urllist.length - 1,1)
            }else{
                this.$Notice.error({
                    title: '地理座標點不能小於三個！',
                    duration: 8,
                });
            }
            // console.log(this.markersArray)
        },
        addTudi(){
            this.modal_loading = true;
            
                this.formData2.coordinate = JSON.stringify(this.urllist)
                // console.log(this.formData2.coordinate)
                this.$http.post('/soil/update',this.formData2).then((res) => {
                    if (res.code == 200) {
                        this.$Message.success('修改成功!');
                        setTimeout(() => {
                            this.modal2 = false
                            this.$router.go(-1);
                        }, 1000);
                    }
                });
                this.modal_loading = false;
            // }, 2000)
        },
        preview() {
            this.init1()
        },
        esc() {
            this.modal2 = false
            this.$router.go(-1);
        },
        changePeasant(ele){
            this.formData2.peasantName = ele.label
        },
        changePrincipal(ele){
            this.formData2.principalName = ele.label
        },
        look(obj,index){
            this.modal7 = true
            this.$http.get('/camera/live/'+obj.id).then((res) => {
                this.cameraList = res.data
                // this.cameraList.push({'name':r.data.deviceName,"rtmp":r.data.rtmpHd,'hls':r.data.hlsHd,'principalname':ele.principalname});
                this.$nextTick(function () {
                    var player = new EZUIPlayer('myPlayer'+index);
                })
            })
            if (obj != '') {
                this.modalObj = obj
            }
        }
    },
    mounted() {
        this.init();
        this.init1();
        let act = this.$route.params.action
        let id = this.$route.params.id
        // console.log(id)
        if (act === 'modify') {
            this.modal2 = true
        }
    }
};
</script>