You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
597 lines
15 KiB
597 lines
15 KiB
<template>
|
|
<view class="uni-common-mt">
|
|
<view><map id="map" :keyda="keyda" @tap="map" scale="9" :polyline="polyline" @markertap="change" latitude="38.194838"
|
|
longitude="114.284108" :markers="covers"></map></view>
|
|
<view>
|
|
<view class="left-choose">
|
|
<view>
|
|
<!-- <view><image @click="mylocation()" class="cb" src="/subPage/images/self-location.png"></image></view> -->
|
|
</view>
|
|
</view>
|
|
<view class="tan" v-if="isShow">
|
|
<text @click="gotoDetail(selectData.type)">
|
|
<image :src="this.$config.ROOTPATH+ selectData.logo" style="width: 80px;height: 80px;margin-bottom: 10px;"></image>
|
|
<view class="title">
|
|
{{ selectData.markerTitle }}
|
|
<!-- <button @click="getJWD()" class="button" style="float: right;">定位</button> -->
|
|
</view>
|
|
<!-- <button disabled="disabled" class="button"></button> -->
|
|
<view class="address">{{ selectData.address }}</view>
|
|
</text>
|
|
<view style="clear: both;height: 0.5px;width: 100%;background: #F1F1F1;margin-top: 10px;margin-bottom: 2px;"></view>
|
|
<view @click="togglePopup('popup')">
|
|
<image src="/subPage/images/other.png"></image>
|
|
<text class="other">其他</text>
|
|
</view>
|
|
<view class="daohang" @click="daohang">
|
|
<image src="/subPage/images/icon_adr.png"></image>
|
|
<text class="dh">导航</text>
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="popup" :type="type">
|
|
<view v-for="(item, index) in oData" :key="index">
|
|
<view @click="changeOther(item.index)">
|
|
<view class="otitle">{{ item.markerTitle }}</view>
|
|
<view class="oaddress">{{ item.distance }}|{{ item.address }}</view>
|
|
<view style="height: 1px;width: 100%;background: #F1F1F1;margin-top: 10px;"></view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
import uniIcon from '@/components/uni-icon/uni-icon.vue';
|
|
var that;
|
|
var mapId = 'map';
|
|
export default {
|
|
components: {
|
|
uniPopup,
|
|
uniIcon
|
|
},
|
|
data() {
|
|
that = this;
|
|
return {
|
|
isLoading: false,
|
|
keyda: 1,
|
|
type: 'bottom',
|
|
height: '600upx',
|
|
latitude: this.$param.clat, //this.$param.clat
|
|
longitude: this.$param.clng, //this.$param.clng
|
|
covers: [{
|
|
// latitude: this.$param.clat,
|
|
// longitude: this.$param.clng,
|
|
// latitude: this.latitude,
|
|
// longitude: this.longitude,
|
|
// iconPath: '/subPage/images/me.png',
|
|
// id: 0,
|
|
// markerTitle: '我的位置',
|
|
// rotate: 315
|
|
}],
|
|
markers: [],
|
|
selectMarker: 0,
|
|
selectedMarker: 1,
|
|
selectData: {},
|
|
isShow: false,
|
|
oData: [],
|
|
polyline: [
|
|
// {
|
|
// points:[],
|
|
// color:"#11C966",
|
|
// width:5,
|
|
// borderColor:"#C0C0C0",
|
|
// borderWidth:2
|
|
// }
|
|
],
|
|
start: {},
|
|
end: {}
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
uni.showLoading({
|
|
title:"加载中",
|
|
mask:true
|
|
})
|
|
var that = this;
|
|
this.$util.bindGpsObj(that);
|
|
this.requestLocation();
|
|
},
|
|
|
|
methods: {
|
|
getInitData: function() {
|
|
var data = {
|
|
"pageno": "1",
|
|
"pagesize": "1",
|
|
"sort": "2",
|
|
"region": that.$config.ARER_CODE,
|
|
"type": "2901"
|
|
}
|
|
that.$Request.post(that.$config.messagelist, data).then(res => {
|
|
if (res.status == 200 && res.data.length > 0) {
|
|
var remark = res.data[0].remark;
|
|
remark = remark.replace("<p>", '');
|
|
remark = remark.replace("</p>", '');
|
|
var obj = eval('(' + remark + ')');
|
|
var xianlu = {
|
|
points: obj,
|
|
color: "#11C966",
|
|
width: 5,
|
|
borderColor: "#C0C0C0",
|
|
borderWidth: 2
|
|
}
|
|
that.polyline.push(xianlu);
|
|
var start = {
|
|
latitude: obj[0].latitude,
|
|
longitude: obj[0].longitude,
|
|
iconPath: '/subPage/images/map_qi.png',
|
|
id: "998",
|
|
markerTitle: "起点",
|
|
address: "",
|
|
type: 'qd',
|
|
logo: ""
|
|
}
|
|
var end = {
|
|
latitude: obj[obj.length - 1].latitude,
|
|
longitude: obj[obj.length - 1].longitude,
|
|
iconPath: '/subPage/images/map_zhong.png',
|
|
id: "999",
|
|
markerTitle: "终点",
|
|
address: "",
|
|
type: 'zd',
|
|
logo: ""
|
|
}
|
|
that.start = start;
|
|
that.end = end;
|
|
that.getData();
|
|
}
|
|
});
|
|
},
|
|
gotoDetail: function(type) {
|
|
if (type == "jg") {
|
|
uni.navigateTo({
|
|
url: "/subPage/3Dzoulang/3Dzoulang/jingguanDetail/jingguanDetail?guid=" + this.selectData.id
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '/subPage/famousVillage/famousVillagetail/famousVillagetail?guid=' + this.selectData.id
|
|
})
|
|
}
|
|
},
|
|
callGpsSuccess: function(lat, lng){
|
|
that.$param.clat = lat;
|
|
that.$param.clng = lng;
|
|
that.latitude = lat;
|
|
that.longitude = lng;
|
|
that.getInitData();
|
|
uni.hideLoading();
|
|
that.$util.unbindGpsObj();
|
|
},
|
|
callGpsFail: function(){
|
|
that.latitude = this.$param.lat;
|
|
that.longitude = this.$param.lng;
|
|
that.getInitData();
|
|
uni.hideLoading();
|
|
this.$util.unbindGpsObj();
|
|
},
|
|
requestLocation: function() {
|
|
console.log('---requestLocation---');
|
|
this.$util.getLocation(
|
|
function(res) {
|
|
if (that.$wechat.isWechat()) {
|
|
that.latitude = res.latitude;
|
|
that.longitude = res.longitude;
|
|
|
|
that.$param.clat = res.latitude;
|
|
that.$param.clng = res.longitude;
|
|
|
|
// that.covers[0].latitude = res.latitude;
|
|
// that.covers[0].longitude = res.longitude;
|
|
|
|
// that.moveTolocation();
|
|
that.getInitData();
|
|
}else{
|
|
that.getInitData();
|
|
}
|
|
uni.hideLoading();
|
|
},
|
|
function() {
|
|
console.log('location error---');
|
|
}
|
|
);
|
|
},
|
|
moveTolocation: function() {
|
|
var mapCtx = uni.createMapContext(mapId);
|
|
mapCtx.moveToLocation();
|
|
|
|
},
|
|
togglePopup(open) {
|
|
var data = that.covers;
|
|
var oData = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (i != 0 && i != that.selectMarker && data[i].id != "998" && data[i].id != "999") {
|
|
data[i]['index'] = i;
|
|
oData.push(data[i]);
|
|
}
|
|
}
|
|
that.oData = oData;
|
|
that.$refs[open].open();
|
|
},
|
|
getJWD: function() {
|
|
var that = this;
|
|
uni.getLocation({
|
|
// type: 'wgs84',
|
|
type: 'gcj02',
|
|
success: function(res) {
|
|
uni.showModal({
|
|
title: '成功',
|
|
content: res.longitude + ',' + res.latitude
|
|
});
|
|
console.log('111》》' + that.longitude + ',' + that.latitude);
|
|
console.log('经纬度：' + res.longitude + ',' + res.latitude);
|
|
that.longitude = res.longitude;
|
|
that.latitude = res.latitude;
|
|
},
|
|
fail: function() {
|
|
uni.showToast({
|
|
title: '失败',
|
|
icon: 'none'
|
|
});
|
|
console.log('失败了');
|
|
that.longitude = that.$param.lng;
|
|
that.latitude = that.$param.lat;
|
|
}
|
|
});
|
|
},
|
|
mylocation() {
|
|
that.latitude = that.$param.clat;
|
|
that.longitude = that.$param.clng;
|
|
// this.moveTolocation();
|
|
},
|
|
getData() {
|
|
var that = this;
|
|
var data = {
|
|
pagesize: 100,
|
|
region: this.$config.ARER_CODE,
|
|
pageno: 1,
|
|
sort: 2,
|
|
type: '2917'
|
|
};
|
|
var objData = [];
|
|
that.$Request.get(this.$config.messagelist, data).then(res => {
|
|
if (res.status == 200) {
|
|
var data = res.data;
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (data[i].region != '130131' && data[i].region != '130123' && data[i].region != '130126') {
|
|
continue;
|
|
}
|
|
if (i + 1 == that.selectMarker) {
|
|
var item = {
|
|
latitude: data[i].lat,
|
|
longitude: data[i].lng,
|
|
iconPath: '/subPage/images/map_toilet_11b.png',
|
|
id: data[i].guid,
|
|
markerTitle: data[i].title,
|
|
address: data[i].address,
|
|
type: 'jg',
|
|
logo: data[i].logo
|
|
// distance: '离我最近'
|
|
};
|
|
that.latitude = data[i].lat;
|
|
that.longitude = data[i].lng;
|
|
that.selectData = item;
|
|
} else {
|
|
var item = {
|
|
latitude: data[i].lat,
|
|
longitude: data[i].lng,
|
|
iconPath: '/subPage/images/map_toilet_11.png',
|
|
id: data[i].guid,
|
|
markerTitle: data[i].title,
|
|
address: data[i].address,
|
|
type: 'jg',
|
|
logo: data[i].logo
|
|
// distance: '距离' + this.$util.formatDistance(Math.ceil(data[i]._distance)) + ''
|
|
};
|
|
}
|
|
objData.push(item);
|
|
}
|
|
// objData.unshift(that.covers[0]);
|
|
//驿站营地数据
|
|
that.getYzData(objData);
|
|
// this.togglePopup();
|
|
}
|
|
});
|
|
},
|
|
getYzData: function(objData) {
|
|
var requestData = {
|
|
pagesize: 10,
|
|
region: this.$config.ARER_CODE,
|
|
pageno: 1,
|
|
sort: 2,
|
|
type: '2911',
|
|
lng: this.$param.clng,
|
|
lat: this.$param.clat
|
|
};
|
|
this.$Request.post(this.$config.messagelist, requestData).then(res => {
|
|
var data = res.data;
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (data[i].region != '130131' && data[i].region != '130123' && data[i].region != '130126') {
|
|
continue;
|
|
}
|
|
var item = {
|
|
latitude: data[i].lat,
|
|
longitude: data[i].lng,
|
|
iconPath: '/subPage/images/map_toilet_10.png',
|
|
id: data[i].guid,
|
|
markerTitle: data[i].title,
|
|
address: data[i].address,
|
|
type: 'yz',
|
|
logo: data[i].logo
|
|
// distance: '距离' + this.$util.formatDistance(Math.ceil(data[i].distance)) + ''
|
|
};
|
|
objData.push(item);
|
|
// that.covers = objData;
|
|
}
|
|
objData.push(this.start);
|
|
objData.push(this.end);
|
|
objData.unshift(that.covers[0]);
|
|
that.covers = objData;
|
|
});
|
|
},
|
|
change(e) {
|
|
var that = this;
|
|
var data = that.covers;
|
|
that.selectedMarker = that.selectMarker;
|
|
for (let i = 0; i < data.length; i++) {
|
|
if (e.detail.markerId == 0) {
|
|
//点击的自己的位置拿最近的第一个
|
|
that.selectMarker = 1;
|
|
} else if (data[i].id == e.detail.markerId) {
|
|
//点击的对应的marker
|
|
that.selectMarker = i;
|
|
// if(e.detail.markerId =="998" || e.detail.markerId =="999"){
|
|
// var type = that.covers[i].type;
|
|
// if(type == "qd"){
|
|
// that.covers[i]
|
|
// }else if(type == "qd"){
|
|
|
|
// }
|
|
|
|
// return;
|
|
// }
|
|
}
|
|
}
|
|
//弹出层方法
|
|
that.changeMarker();
|
|
},
|
|
changeMarker() {
|
|
if (that.selectMarker != that.selectedMarker) {
|
|
var data = [];
|
|
var da = this.covers;
|
|
for (let i = 0; i < da.length; i++) {
|
|
data.push(da[i]);
|
|
}
|
|
var objData = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
if (i == that.selectMarker) {
|
|
var distance = '离我最近';
|
|
var type = 'jg';
|
|
var iconPath = '/subPage/images/map_toilet_11b.png';
|
|
if (i != 1) {
|
|
distance = data[i]._distance;
|
|
}
|
|
if (data[i].type == 'yz') {
|
|
type = 'yz';
|
|
iconPath = '/subPage/images/map_toilet_10b.png';
|
|
}
|
|
if (data[i].type == 'qd') {
|
|
type = 'qd';
|
|
iconPath = '/subPage/images/map_qi_b.png';
|
|
}
|
|
if (data[i].type == 'zd') {
|
|
type = 'zd';
|
|
iconPath = '/subPage/images/map_zhong_b.png';
|
|
}
|
|
var item = {
|
|
latitude: data[i].latitude,
|
|
longitude: data[i].longitude,
|
|
iconPath: iconPath,
|
|
id: data[i].id,
|
|
markerTitle: data[i].markerTitle,
|
|
address: data[i].address,
|
|
type: type,
|
|
logo: data[i].logo
|
|
// distance: data[i].distance
|
|
};
|
|
that.latitude = data[i].latitude;
|
|
that.longitude = data[i].longitude;
|
|
that.selectData = item;
|
|
} else {
|
|
if (i == 0) {
|
|
objData.push(data[0]);
|
|
continue;
|
|
}
|
|
var type = 'jg';
|
|
var iconPath = '/subPage/images/map_toilet_11.png';
|
|
if (data[i].type == 'yz') {
|
|
type = 'yz';
|
|
iconPath = '/subPage/images/map_toilet_10.png';
|
|
}
|
|
if (data[i].type == 'qd') {
|
|
type = 'qd';
|
|
iconPath = '/subPage/images/map_qi.png';
|
|
}
|
|
if (data[i].type == 'zd') {
|
|
type = 'zd';
|
|
iconPath = '/subPage/images/map_zhong.png';
|
|
}
|
|
var item = {
|
|
latitude: data[i].latitude,
|
|
longitude: data[i].longitude,
|
|
iconPath: iconPath,
|
|
id: data[i].id,
|
|
markerTitle: data[i].markerTitle,
|
|
address: data[i].address,
|
|
type: type,
|
|
// distance: data[i].distance
|
|
logo: data[i].logo
|
|
};
|
|
}
|
|
objData.push(item);
|
|
}
|
|
that.covers = objData;
|
|
if (objData[that.selectMarker].id == "998" || objData[that.selectMarker].id == "999") {
|
|
that.isShow = false;
|
|
return
|
|
}
|
|
that.isShow = true;
|
|
} else {
|
|
if (that.covers[that.selectMarker].id == "998" || that.covers[that.selectMarker].id == "999") {
|
|
that.isShow = false;
|
|
return;
|
|
}
|
|
if (that.isShow) {
|
|
that.isShow = false;
|
|
} else {
|
|
that.isShow = true;
|
|
}
|
|
}
|
|
},
|
|
map() {
|
|
that.isShow = false;
|
|
},
|
|
changeOther(index) {
|
|
that.selectedMarker = that.selectMarker;
|
|
that.selectMarker = index;
|
|
//弹出层方法
|
|
that.changeMarker();
|
|
that.$refs['popup'].close();
|
|
},
|
|
daohang() {
|
|
// #ifdef H5
|
|
|
|
if (this.$wechat.isWechat()) {
|
|
var mapParam = {
|
|
latitude: that.covers[that.selectMarker].latitude,
|
|
longitude: that.covers[that.selectMarker].longitude,
|
|
scale: 18,
|
|
name: that.covers[that.selectMarker].markerTitle,
|
|
address: that.covers[that.selectMarker].address
|
|
};
|
|
this.$util.openLocation(mapParam);
|
|
return;
|
|
}
|
|
|
|
window.location.href =
|
|
'https://uri.amap.com/navigation?from=' +
|
|
that.$param.clng +
|
|
',' +
|
|
that.$param.clat +
|
|
',我的位置&to=' +
|
|
that.covers[that.selectMarker].longitude +
|
|
',' +
|
|
that.covers[that.selectMarker].latitude +
|
|
',' +
|
|
that.covers[that.selectMarker].address +
|
|
'&mode=car&src=sjz_uniapp&callnative=1';
|
|
// #endif
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
map {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.tan {
|
|
width: 100%;
|
|
height: 140px;
|
|
background: #ffffff;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
z-index: 3;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.title {
|
|
padding: 8px;
|
|
margin-left: 2px;
|
|
font-weight: 700;
|
|
margin-top: 6%;
|
|
}
|
|
|
|
.otitle {
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.button {
|
|
width: auto;
|
|
height: 25px;
|
|
margin-left: 8px;
|
|
margin-bottom: 8px;
|
|
float: left;
|
|
vertical-align: middle;
|
|
font-size: 12px;
|
|
color: gray;
|
|
}
|
|
|
|
.address {
|
|
/* clear: both; */
|
|
font-size: 12px;
|
|
margin-left: 8px;
|
|
color: gray;
|
|
}
|
|
|
|
.oaddress {
|
|
clear: both;
|
|
font-size: 12px;
|
|
margin-top: 8px;
|
|
color: gray;
|
|
}
|
|
|
|
image {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 8px;
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
float: left;
|
|
}
|
|
|
|
.other {
|
|
font-size: 16px;
|
|
float: left;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.daohang {
|
|
float: right;
|
|
}
|
|
|
|
.dh {
|
|
margin-right: 40px;
|
|
font-size: 16px;
|
|
margin-top: 8px;
|
|
float: left;
|
|
}
|
|
|
|
.left-choose {
|
|
float: left;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
width: 45px;
|
|
z-index: 3;
|
|
bottom: 26%;
|
|
}
|
|
|
|
.cb {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
</style>
|
|
|