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> |