var me = new Vue({
|
el: '#mapVue',
|
data: {
|
map: null, //map
|
getdata: null,
|
marker: null,
|
layuiLayer: null,
|
nowIndex: null,
|
|
LXdhStart: null,
|
LXdhEnd: null,
|
LxdhLine: null,
|
|
activeName: 'first',
|
|
|
//存放实时坐标
|
lat: "",
|
lng: "",
|
seedata: '',
|
nowPosition: '',
|
resultFeedbackPopupShow: false,
|
popupDisplay: "none",
|
|
regionName: ''
|
},
|
methods: {
|
getLocalPoliceStation () {
|
window.parent.getRegionName(this.regionName)
|
},
|
getDataList () {
|
var that = this
|
that.beginCome()
|
},
|
beginCome () {
|
var data = [{
|
"id": '100000',
|
"place": '无数据',
|
"state": '0',
|
"dtype": '0',
|
"size": '300',
|
"jd": "115.822311",
|
"wd": "28.646341"
|
}]
|
//url解码
|
this.getdata = this.getQueryVariable('data') || data
|
|
console.log(this.getdata, 456)
|
this.map = this.beginMap(this.map, this.getdata) //创建并接受map
|
this.map.invalidateSize(true) //应用地图高度
|
},
|
//url解码
|
getQueryVariable (variable) {
|
var query = window.location.search.substring(1)
|
var vars = query.split("&")
|
for (var i = 0; i < vars.length; i++) {
|
var pair = vars[i].split("=")
|
if (pair[0] == variable) { return JSON.parse(decodeURI(pair[1])) } //解码url 和 JSON
|
}
|
return (false)
|
},
|
beginMap (map, data) {
|
var that = this,
|
center = [data[0].wd, data[0].jd],
|
url = `http://223.82.109.183:2082/api/alarm/alarm/APP-getAlarm?id=${data[0].id}`
|
// url = `http://localhost:89/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
|
this.nowPosition = center
|
|
axios.post(url).then((res) => {
|
if (res.data.data.length != 0) {
|
var dat = res.data.data[0]
|
for (var key in dat) {
|
if (dat[key] == null || dat[key] == '') {
|
dat[key] = '暂无'
|
}
|
}
|
this.seedata = dat
|
|
} else {
|
this.seedata = data[0]
|
}
|
})
|
|
var createMap = () => {
|
map = L.map('map', { //初始化地图
|
center: center,
|
zoom: 20,
|
minZoom: 2,
|
maxZoom: 17,
|
attributionControl: false, //去掉右下角
|
zoomControl: false, //去掉缩放
|
})
|
L.tileLayer( //添加切片图层
|
// "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", {//顺丰地图
|
"https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", { //顺丰地图
|
}
|
).addTo(map)
|
}
|
createMap()
|
|
this.nowPosition = center
|
|
return map //抛出map
|
},
|
|
//定位当前位置
|
locationMap () {
|
this.map.setView([this.lat, this.lng], 20)
|
},
|
|
getLocationData () {
|
var that = this
|
var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq")
|
var positionNum = 0
|
var options = {
|
timeout: 8000
|
}
|
|
function showPosition (position) {
|
|
that.regionName = position.district || position.city
|
|
console.log(position)
|
|
var adCode = position.adCode //邮政编码
|
var nation = position.nation //中国
|
var city = position.city //城市
|
var addr = position.addr //详细地址
|
that.lat = position.lat //
|
that.lng = position.lng //火星坐标 //TODO 实现业务代码逻辑
|
|
if (that.LXdhStart != null) {
|
that.map.removeLayer(that.LXdhStart)
|
}
|
|
//绘制起点和终点
|
that.LXdhStart = L.markerClusterGroup()
|
|
var transportIcon = L.Icon.extend({ //图标初始化
|
options: {
|
iconSize: [50, 50], // 图标尺寸
|
}
|
})
|
|
var qd = new transportIcon({
|
iconUrl: './img/dingw.gif'
|
})
|
|
that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
|
icon: qd,
|
}))
|
|
that.map.addLayer(that.LXdhStart)
|
|
};
|
|
function showErr () {
|
//TODO 如果出错了调用此方法
|
};
|
|
geolocation.getLocation(showPosition, showErr, options)
|
},
|
|
},
|
created () { },
|
mounted () {
|
this.getDataList()
|
this.getLocationData()
|
},
|
wacth: {}
|
})
|
