중천 지도 사용 실례
<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>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.