382 lines
9.2 KiB
Vue
382 lines
9.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="map">
|
|||
|
|
<map class="map" id="map" :longitude="locationInfo.locationLongitude"
|
|||
|
|
:latitude="locationInfo.locaitonLatitude" scale="14" :show-location="true"
|
|||
|
|
:markers="markers" :controls="controls" @markertap="makertap" :polyline="polyline"></map>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 引用高德地图微信小程序JSAPI模块
|
|||
|
|
var AMap = require('@/common/utils/amap-wx.130.js');
|
|||
|
|
var markersData = [];
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
markers: [],
|
|||
|
|
poisdatas: {},
|
|||
|
|
longitudeUser: '',
|
|||
|
|
latitudeUser: '',
|
|||
|
|
longitude:'',
|
|||
|
|
latitude:'',
|
|||
|
|
address: '',
|
|||
|
|
name: '',
|
|||
|
|
controls: [{
|
|||
|
|
id: 1,
|
|||
|
|
iconPath: '/static/images/liangbiao1.png',
|
|||
|
|
position: {
|
|||
|
|
left: 0,
|
|||
|
|
top: 0,
|
|||
|
|
width: 50,
|
|||
|
|
height: 50
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
targetLatitude: '',
|
|||
|
|
targetLongitude: '',
|
|||
|
|
polyline: [],
|
|||
|
|
distance: "",
|
|||
|
|
cost: "",
|
|||
|
|
user:{},
|
|||
|
|
locationInfo:{}
|
|||
|
|
// markersList:[]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.getUserInfo();
|
|||
|
|
var _self = this;
|
|||
|
|
// 获取位置
|
|||
|
|
// uni.getLocation({
|
|||
|
|
// type: 'gcj02',
|
|||
|
|
// success: function(res) {
|
|||
|
|
// console.log('87',res)
|
|||
|
|
// _self.longitude = res.longitude;
|
|||
|
|
// _self.latitude = res.latitude;
|
|||
|
|
// },
|
|||
|
|
// fail: function(res) {
|
|||
|
|
// console.log("定位失败", res);
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// 高德地图的key
|
|||
|
|
var myAmapFun = new AMap.AMapWX({
|
|||
|
|
key: '5845be73774021ea4bd4b58104a513ac'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// this.markers = JSON.parse(this.markersList)
|
|||
|
|
// 根据关键词获取周边信息
|
|||
|
|
// myAmapFun.getPoiAround({
|
|||
|
|
// iconPathSelected: '/static/images/point.png',
|
|||
|
|
// iconPath: '/static/images/point1.png',
|
|||
|
|
// querykeywords: '健身',
|
|||
|
|
// // 看高德地图POI分类编码 https://lbs.amap.com/api/javascript-api/download/
|
|||
|
|
// querytypes: '080111',
|
|||
|
|
// offset: 10,
|
|||
|
|
// success: function(data) {
|
|||
|
|
|
|||
|
|
// console.log('83',data)
|
|||
|
|
// // 标记点 https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map
|
|||
|
|
// _self.markers = data.markers;
|
|||
|
|
// // 信息点数据 https://lbs.amap.com/api/webservice/guide/api/search/#around
|
|||
|
|
// _self.poisdatas = data.poisData;
|
|||
|
|
// var markers_new = [];
|
|||
|
|
// _self.markers.forEach(function(item, index) {
|
|||
|
|
// markers_new.push({
|
|||
|
|
// id: item.id,
|
|||
|
|
// width: item.width,
|
|||
|
|
// height: item.height,
|
|||
|
|
// iconPath: item.iconPath,
|
|||
|
|
// latitude: item.latitude,
|
|||
|
|
// longitude: item.longitude,
|
|||
|
|
// address: item.address,
|
|||
|
|
// name: item.name,
|
|||
|
|
// distance: _self.poisdatas[index].distance,
|
|||
|
|
// //自定义标记点上方的气泡窗口
|
|||
|
|
// callout: {
|
|||
|
|
// padding: 2,
|
|||
|
|
// fontSize: 15,
|
|||
|
|
// bgColor: '#199d33',
|
|||
|
|
// color: '#ffffff',
|
|||
|
|
// borderRadius: 5,
|
|||
|
|
// display: 'ALWAYS',
|
|||
|
|
// content: _self.poisdatas[index].name
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
// })
|
|||
|
|
// _self.markers = markers_new;
|
|||
|
|
// _self.markers = JSON.parse(_self.markersList)
|
|||
|
|
|
|||
|
|
// },
|
|||
|
|
// fail: function(info) {
|
|||
|
|
// //失败回调
|
|||
|
|
// console.log("info", info)
|
|||
|
|
// }
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async getUserInfo() {
|
|||
|
|
const res = await this.$myRequest({
|
|||
|
|
url: '/getInfo'
|
|||
|
|
})
|
|||
|
|
this.user = res.data.user;
|
|||
|
|
this.latitude = this.user.latitude;
|
|||
|
|
this.longitude = this.user.longitude;
|
|||
|
|
console.log('130',this.user)
|
|||
|
|
// this.locationListByLl();
|
|||
|
|
},
|
|||
|
|
// 查询医疗设备场所列表(距离由近至远)
|
|||
|
|
async locationListByLl() {
|
|||
|
|
let that = this;
|
|||
|
|
const res = await this.$myRequest({
|
|||
|
|
url: '/system/location/locationListByLl/?longitude=' + this.user.longitude +
|
|||
|
|
'&latitude=' + this.user.latitude,
|
|||
|
|
data: {
|
|||
|
|
pageNum: 1,
|
|||
|
|
pageSize: 10000
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
if (res.data.code == 200) {
|
|||
|
|
this.locationInfo = res.data.rows[0]
|
|||
|
|
}
|
|||
|
|
var markers_new = [];
|
|||
|
|
that.markers.forEach(function(item, index) {
|
|||
|
|
markers_new.push({
|
|||
|
|
|
|||
|
|
id: item.id,
|
|||
|
|
width: 22,
|
|||
|
|
height: 32,
|
|||
|
|
// icon: '@/static/images/point.png',
|
|||
|
|
iconPath: '/static/images/point1.png',
|
|||
|
|
latitude: item.locaitonLatitude,
|
|||
|
|
longitude: item.locationLongitude,
|
|||
|
|
address: item.locationAddress,
|
|||
|
|
name: item.locationName,
|
|||
|
|
distance: item.distance,
|
|||
|
|
//自定义标记点上方的气泡窗口
|
|||
|
|
callout: {
|
|||
|
|
|
|||
|
|
padding: 2,
|
|||
|
|
fontSize: 15,
|
|||
|
|
bgColor: '#199d33',
|
|||
|
|
color: '#ffffff',
|
|||
|
|
borderRadius: 5,
|
|||
|
|
display: 'ALWAYS',
|
|||
|
|
content: item.locationName
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
that.markers = markers_new;
|
|||
|
|
},
|
|||
|
|
// 点击标记点
|
|||
|
|
makertap(e) {
|
|||
|
|
this.targetLatitude= '';
|
|||
|
|
this.targetLongitude= '';
|
|||
|
|
this.polyline= [];
|
|||
|
|
this.distance= "";
|
|||
|
|
this.cost= "";
|
|||
|
|
var id = e.detail.markerId;
|
|||
|
|
console.log(id);
|
|||
|
|
console.log(this.markers);
|
|||
|
|
this.showMarkerInfo(this.markers, id);
|
|||
|
|
this.changeMarkerColor(this.markers, id);
|
|||
|
|
},
|
|||
|
|
// 展示标记点信息
|
|||
|
|
showMarkerInfo(data, i) {
|
|||
|
|
this.poisdatas = {
|
|||
|
|
name: data[i].name,
|
|||
|
|
desc: data[i].address,
|
|||
|
|
distance: data[i].distance
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 改变标记点颜色
|
|||
|
|
changeMarkerColor(data, i) {
|
|||
|
|
var markers = [];
|
|||
|
|
for (var j = 0; j < data.length; j++) {
|
|||
|
|
if (j == i) {
|
|||
|
|
data[j].iconPath = "/static/images/point.png"; //如：../../img/marker_checked.png
|
|||
|
|
this.targetLatitude = data[j].latitude
|
|||
|
|
this.targetLongitude = data[j].longitude
|
|||
|
|
} else {
|
|||
|
|
data[j].iconPath = "/static/images/point1.png"; //如：../../img/marker.png
|
|||
|
|
}
|
|||
|
|
markers.push({
|
|||
|
|
id: data[j].id,
|
|||
|
|
latitude: data[j].latitude,
|
|||
|
|
longitude: data[j].longitude,
|
|||
|
|
iconPath: data[j].iconPath,
|
|||
|
|
width: data[j].width,
|
|||
|
|
height: data[j].height,
|
|||
|
|
address: data[j].address,
|
|||
|
|
name: data[j].name,
|
|||
|
|
distance: data[j].distance,
|
|||
|
|
callout: {
|
|||
|
|
padding: 2,
|
|||
|
|
fontSize: 15,
|
|||
|
|
bgColor: '#199d33',
|
|||
|
|
color: '#ffffff',
|
|||
|
|
borderRadius: 5,
|
|||
|
|
display: 'ALWAYS',
|
|||
|
|
content: data[j].name
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
this.address = data[i].address;
|
|||
|
|
this.name = data[i].name;
|
|||
|
|
this.markers = markers;
|
|||
|
|
},
|
|||
|
|
// 打开微信小程序内置导航界面
|
|||
|
|
daoGym() {
|
|||
|
|
// uni.openLocation({
|
|||
|
|
// latitude: this.latitude,
|
|||
|
|
// longitude: this.longitude,
|
|||
|
|
// name: this.name,
|
|||
|
|
// address: this.address
|
|||
|
|
// });
|
|||
|
|
let that = this;
|
|||
|
|
console.log(that.longitude + ',' + that.latitude)
|
|||
|
|
console.log(that.targetLongitude + ',' + that.targetLatitude)
|
|||
|
|
|
|||
|
|
var myAmapFun = new amapFile.AMapWX({
|
|||
|
|
key: '5845be73774021ea4bd4b58104a513ac'
|
|||
|
|
});
|
|||
|
|
// 116.99744,36.65118
|
|||
|
|
// 36.647979,117.016522
|
|||
|
|
myAmapFun.getWalkingRoute({
|
|||
|
|
// origin: '116.481028,39.989643',
|
|||
|
|
// destination: '116.434446,39.90816',
|
|||
|
|
origin: String(that.longitude) + ',' + String(that.latitude),
|
|||
|
|
destination: String(that.targetLongitude) + ',' + String(that.targetLatitude),
|
|||
|
|
success: function(data) {
|
|||
|
|
console.log(data);
|
|||
|
|
var points = [];
|
|||
|
|
if (data.paths && data.paths[0] && data.paths[0].steps) {
|
|||
|
|
var steps = data.paths[0].steps;
|
|||
|
|
for (var i = 0; i < steps.length; i++) {
|
|||
|
|
var poLen = steps[i].polyline.split(';');
|
|||
|
|
for (var j = 0; j < poLen.length; j++) {
|
|||
|
|
points.push({
|
|||
|
|
longitude: parseFloat(poLen[j].split(',')[0]),
|
|||
|
|
latitude: parseFloat(poLen[j].split(',')[1])
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
that.polyline = [{
|
|||
|
|
points: points,
|
|||
|
|
color: "#0091ff",
|
|||
|
|
width: 6
|
|||
|
|
}]
|
|||
|
|
if (data.paths[0] && data.paths[0].distance) {
|
|||
|
|
that.distance = data.paths[0].distance + '米'
|
|||
|
|
}
|
|||
|
|
if (data.paths[0] && data.paths[0].duration) {
|
|||
|
|
that.cost = parseInt(data.paths[0].duration / 60) + '分钟'
|
|||
|
|
}
|
|||
|
|
// if (data.taxi_cost) {
|
|||
|
|
// that.cost = '打车约' + parseInt(data.taxi_cost) + '元'
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
fail: function(info) {
|
|||
|
|
console.log(info)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
/deep/ .amap-icon{
|
|||
|
|
|
|||
|
|
overflow:inherit !important;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.map {
|
|||
|
|
// height: 1200rpx;
|
|||
|
|
height: 1600rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 10rpx;
|
|||
|
|
top: 300rpx;
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map_bottom {
|
|||
|
|
height: 300rpx;
|
|||
|
|
|
|||
|
|
.map_text {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0px;
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
width: 600rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
.row1 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
margin: 5px 0;
|
|||
|
|
display: block;
|
|||
|
|
font-size: 16px;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 1;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.h1 {
|
|||
|
|
margin: 15px 0;
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.h2 {
|
|||
|
|
margin-left: 15rpx;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: grey;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.luxian {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 5px;
|
|||
|
|
margin: 20rpx 45rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
width: 65rpx;
|
|||
|
|
height: 65rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.daohang {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
letter-spacing: 2rpx;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|