parent
6cb0796778
commit
b1bb5ffc77
@ -1,485 +0,0 @@ |
||||
<template> |
||||
<view class="uni-common-mt"> |
||||
<view> |
||||
<map id="map" @tap="map" scale="14" @markertap="change" show-location="true" :latitude="latitude" :longitude="longitude" :markers="covers" > |
||||
</map> |
||||
</view> |
||||
<view> |
||||
<view class="left-choose"> |
||||
<view class="leftChoose"> |
||||
<view><image @click="selectIcon('country')" class="cb" :src="country"></image></view> |
||||
<view><image @click="selectIcon('pano')" class="cb" :src="pano"></image></view> |
||||
</view> |
||||
<view> |
||||
<view><image @click="mylocation()" class="cb dw" src="" ></image></view> |
||||
</view> |
||||
</view> |
||||
<view class="tan" v-if="isShow"> |
||||
<view class="title">{{selectData.markerTitle}}</view> |
||||
<button disabled="disabled" class="button">{{selectData.distance}}</button> |
||||
<view class="address">{{selectData.address}}</view> |
||||
<view style="height: 0.5px;width: 100%;background: #F1F1F1;margin-top: 10px;margin-bottom: 2px;"> </view> |
||||
<view @click="togglePopup('popup')"><image class="ot" src="../../../static/images/other.png"></image><text class="other">其他</text></view> |
||||
<view class="daohang" @click="daohang"><image class="ot" src="../../../static/images/icon_adr.png"></image><text class="dh">导航</text></view> |
||||
</view> |
||||
<view class="bottomButtom tan2"> |
||||
<view style="float: left;width: 50%;" @click="call('120')"> |
||||
<view class="hj"> |
||||
<image class="img" src="../../../static/images/120_b.png"></image> |
||||
</view> |
||||
<view class="mes">一键呼救</view> |
||||
<view class="con">呼叫120</view> |
||||
</view> |
||||
<view style="float: left;;width: 50%;" @click="call('110')"> |
||||
<view class="hj riIcon"> |
||||
<image class="img" src="../../../static/images/110_b.png"></image> |
||||
</view> |
||||
<view class="mes">一键呼救</view> |
||||
<view class="con">呼叫110</view> |
||||
</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 { |
||||
type:"bottom", |
||||
height:"600upx", |
||||
latitude: this.$param.clat, |
||||
longitude: this.$param.clng, |
||||
covers: [], |
||||
coversOne:{ |
||||
latitude: this.$param.clat, |
||||
longitude: this.$param.clng, |
||||
iconPath: '../../../static/images/me.png', |
||||
id:0, |
||||
markerTitle:"我的位置", |
||||
rotate:315 |
||||
}, |
||||
selectMarker: 1, |
||||
selectedMarker:1, |
||||
selectData:{}, |
||||
isShow:true, |
||||
oData:[], |
||||
country: "../../../static/images/country_1.png", |
||||
pano: "../../../static/images/pano_1.png", |
||||
selectDIcon: 'country', |
||||
selectUrl: '../../../static/images/country_1.png', |
||||
selectedIconPath:"", |
||||
iconPath:"" |
||||
} |
||||
}, |
||||
onLoad() { |
||||
uni.showLoading({ |
||||
title:"加载中", |
||||
mask:true |
||||
}) |
||||
var that = this; |
||||
this.$util.bindGpsObj(that); |
||||
this.requestLocation(); |
||||
}, |
||||
methods: { |
||||
callGpsSuccess: function(lat, lng){ |
||||
that.$param.clat = lat; |
||||
that.$param.clng = lng; |
||||
that.coversOne.latitude = lat; |
||||
that.coversOne.longitude = lng; |
||||
that.latitude = lat; |
||||
that.longitude = lng; |
||||
that.getData("医院") |
||||
that.country = "../../../static/images/country_1_h.png"; |
||||
uni.hideLoading(); |
||||
that.$util.unbindGpsObj(); |
||||
}, |
||||
callGpsFail: function(){ |
||||
// uni.showModal({ |
||||
// title:"fail:"+lat+","+lng |
||||
// }) |
||||
that.latitude = this.$param.lat; |
||||
that.longitude = this.$param.lng; |
||||
that.coversOne.latitude = this.$param.lat; |
||||
that.coversOne.longitude = this.$param.lng; |
||||
that.getData("医院") |
||||
that.country = "../../../static/images/country_1_h.png"; |
||||
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.coversOne.latitude = res.latitude; |
||||
that.coversOne.longitude = res.longitude; |
||||
|
||||
that.moveTolocation(); |
||||
that.getData("医院") |
||||
that.country = "../../../static/images/country_1_h.png"; |
||||
}else{ |
||||
that.getData("医院") |
||||
that.country = "../../../static/images/country_1_h.png"; |
||||
} |
||||
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]["index"] = i; |
||||
oData.push(data[i]); |
||||
} |
||||
} |
||||
that.oData = oData; |
||||
that.$refs[open].open(); |
||||
}, |
||||
mylocation(){ |
||||
this.covers = []; |
||||
uni.showLoading({ |
||||
title:"定位中", |
||||
mask:true |
||||
}) |
||||
var that = this; |
||||
this.$util.bindGpsObj(that); |
||||
this.requestLocation(); |
||||
}, |
||||
call(phone){ |
||||
uni.makePhoneCall({ |
||||
phoneNumber: phone |
||||
}); |
||||
}, |
||||
selectIcon(type){ |
||||
that.selectMarker = 1; |
||||
var icon = that.selectDIcon; |
||||
var url = that.selectUrl; |
||||
that[icon] = url; |
||||
switch (type){ |
||||
case 'country': |
||||
that.country = "../../../static/images/country_1_h.png"; |
||||
that.selectDIcon = "country"; |
||||
that.selectUrl = "../../../static/images/country_1.png"; |
||||
that.getData("医院"); |
||||
break; |
||||
case 'pano': |
||||
that.pano = "../../../static/images/pano_1_h.png"; |
||||
that.selectDIcon = "pano"; |
||||
that.selectUrl = "../../../static/images/pano_1.png"; |
||||
that.getData("派出所"); |
||||
break; |
||||
} |
||||
}, |
||||
getData(content){ |
||||
var that = this; |
||||
var selectedIconPath = ""; |
||||
var iconPath = ""; |
||||
if(content == "医院"){ |
||||
that.selectedIconPath = "../../../static/images/map_toilet_7b.png"; |
||||
that.iconPath = "../../../static/images/map_toilet_7.png"; |
||||
}else if(content == "派出所"){ |
||||
that.selectedIconPath = "../../../static/images/map_toilet_8b.png"; |
||||
that.iconPath = "../../../static/images/map_toilet_8.png"; |
||||
} |
||||
content = encodeURI(content); |
||||
var data = { |
||||
"keyword" : content, |
||||
"lat":that.$param.clat, |
||||
"lng":that.$param.clng, |
||||
"pageSize" : "30", |
||||
"pageno": "1" |
||||
} |
||||
// data = encodeURI(data); |
||||
// console.log("编码后"+data) |
||||
that.$Request.get(that.$config.getMapData,data).then(res => { |
||||
var data = []; |
||||
if(res.status == 0){ |
||||
data = res.data; |
||||
data.sort(function(a,b){ |
||||
return a._distance-b._distance; |
||||
}) |
||||
var objData = []; |
||||
for(var i = 0;i < data.length;i++){ |
||||
if(i+1 == that.selectMarker){ |
||||
var item = { |
||||
latitude: data[i].location.lat, |
||||
longitude: data[i].location.lng, |
||||
iconPath: that.selectedIconPath, |
||||
id:data[i].id, |
||||
markerTitle:data[i].title, |
||||
address:data[i].address, |
||||
distance:"离我最近", |
||||
} |
||||
that.latitude = data[i].location.lat; |
||||
that.longitude = data[i].location.lng; |
||||
that.selectData = item; |
||||
}else{ |
||||
var item = { |
||||
latitude: data[i].location.lat, |
||||
longitude: data[i].location.lng, |
||||
iconPath: that.iconPath, |
||||
id:data[i].id, |
||||
markerTitle:data[i].title, |
||||
address:data[i].address, |
||||
distance:"距离"+this.$util.formatDistance(Math.ceil(data[i]._distance))+"" |
||||
} |
||||
} |
||||
objData.push(item); |
||||
} |
||||
objData.unshift(that.coversOne); |
||||
that.covers = objData; |
||||
// this.togglePopup(); |
||||
} |
||||
}) |
||||
}, |
||||
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; |
||||
} |
||||
} |
||||
//弹出层方法 |
||||
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 = "离我最近"; |
||||
if(i != 1){ |
||||
distance = data[i]._distance; |
||||
} |
||||
var item = { |
||||
latitude: data[i].latitude, |
||||
longitude: data[i].longitude, |
||||
iconPath: that.selectedIconPath, |
||||
id:data[i].id, |
||||
markerTitle:data[i].markerTitle, |
||||
address:data[i].address, |
||||
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 item = { |
||||
latitude: data[i].latitude, |
||||
longitude: data[i].longitude, |
||||
iconPath: that.iconPath, |
||||
id:data[i].id, |
||||
markerTitle:data[i].markerTitle, |
||||
address:data[i].address, |
||||
distance:data[i].distance |
||||
} |
||||
} |
||||
objData.push(item); |
||||
} |
||||
that.covers = objData; |
||||
that.isShow = true; |
||||
}else{ |
||||
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=walk&src=sjz_uniapp&callnative=1" |
||||
// #endif |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style> |
||||
map { |
||||
width: 100%; |
||||
height: 100vh; |
||||
} |
||||
.left-choose { |
||||
float: left; |
||||
margin-left: 8px; |
||||
margin-bottom: 30px; |
||||
position: fixed; |
||||
left: 0; right:0; width:45px; z-index: 5; |
||||
bottom:30%; |
||||
} |
||||
.leftChoose { |
||||
background: #FFFFFF; |
||||
} |
||||
.cb { |
||||
width: 45px; |
||||
height: 45px; |
||||
} |
||||
.dw { |
||||
margin-top: 20px; |
||||
} |
||||
.tan { |
||||
width: 100%; |
||||
height: 210px; |
||||
background: #FFFFFF; |
||||
position: fixed; |
||||
left: 0; right:0; width:100%; z-index: 3; |
||||
bottom:0px; |
||||
} |
||||
.tan2 { |
||||
width: 100%; |
||||
height: 60px; |
||||
background: #FFFFFF; |
||||
position: fixed; |
||||
left: 0; right:0; width:100%; z-index: 3; |
||||
bottom:0px; |
||||
} |
||||
.bottomButtom { |
||||
clear: both; |
||||
|
||||
} |
||||
.title { |
||||
padding: 8px; |
||||
margin-left: 2px; |
||||
font-weight: 700; |
||||
} |
||||
.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; |
||||
} |
||||
.ot { |
||||
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; |
||||
} |
||||
.bottomButtom { |
||||
padding: 10px 0 0 20px; |
||||
} |
||||
.hj { |
||||
float: left; |
||||
} |
||||
.img { |
||||
width: 50px; |
||||
height: 50px; |
||||
margin-right: 12px; |
||||
} |
||||
.riIcon { |
||||
margin-left: 8px; |
||||
} |
||||
.mes { |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
} |
||||
.con { |
||||
font-size: 13px; |
||||
float: left; |
||||
margin-left: 8px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue