<template>
|
<view class="map-content" :style="[
|
isCustomBar && {
|
height: customBarH + 'px',
|
paddingTop: statusBarH + 'px',
|
backgroundColor: 'transparent',
|
top: top + 'px',
|
},
|
]">
|
<!--
|
<view class="top">
|
<view class="cancel" @click="close">取消</view>
|
<view class="address-text">
|
{{ addressMap || '' }}
|
</view>
|
<view class="confirm" @click="submit"
|
:style="{ backgroundColor: disable ? 'rgba(0, 0, 0, 0.2)' : '#42b983' }">确定</view>
|
</view>
|
<view class="top">
|
<view class="route" @click="showRoute('route1')">线路1(乘车)</view>
|
<view class="route" @click="showRoute('route2')">线路2(步行)</view>
|
<view class="route" @click="showRoute('route3')">线路3(乘车/步行)</view>
|
</view>
|
-->
|
<view class="top-left">
|
<!-- 返回首页按钮 -->
|
<view class="confirm" @click="gotoHome">
|
<view style="display: flex; flex-direction: column; align-items: center;">
|
<image
|
class="home"
|
src="https://farm.evcc.top/Uploads/yuanboyuan/maps/home.png"
|
/>
|
<text style="font-size: 24rpx; color: #000; margin-top: 4rpx;">首页</text>
|
</view>
|
</view>
|
|
<!-- 动态标记按钮 -->
|
<view
|
v-for="(item, index) in markerShow"
|
:key="item.id"
|
class="confirm"
|
@click="toggleMarker(item)"
|
>
|
<view style="display: flex; flex-direction: column; align-items: center;">
|
<image
|
class="home"
|
:src="`https://farm.evcc.top/Uploads/yuanboyuan/maps/${item.id}${item.show ? '' : '_'}.png`"
|
/>
|
<text style="font-size: 24rpx; color: #000; margin-top: 4rpx;">
|
{{ item.name }}
|
</text>
|
</view>
|
</view>
|
<view style="height:10px"></view>
|
<view @click="showRoute('route1')" style="min-height: 80rpx; padding: 2rpx; border-radius: 10rpx;margin-bottom: 2rpx; background-color: rgba(255, 255, 255, 0.8); display: flex;justify-content: center;align-items: center;">
|
<image
|
style="width:32rpx;height:32rpx;"
|
:src="`https://farm.evcc.top/Uploads/yuanboyuan/maps/route${currentRoute.routeid=='route1' ? '' : '_'}.png`"
|
/>
|
<text style="font-size: 24rpx; color: #000; margin-top: 4rpx;">
|
线路1
|
</text>
|
</view>
|
<view @click="showRoute('route2')" style="min-height: 80rpx; padding: 2rpx; border-radius: 10rpx;margin-bottom: 2rpx; background-color: rgba(255, 255, 255, 0.8); display: flex;justify-content: center;align-items: center;">
|
<image
|
style="width:32rpx;height:32rpx;"
|
:src="`https://farm.evcc.top/Uploads/yuanboyuan/maps/route${currentRoute.routeid=='route2' ? '' : '_'}.png`"
|
/>
|
<text style="font-size: 24rpx; color: #000; margin-top: 4rpx;">
|
线路2
|
</text>
|
</view>
|
|
<view @click="showRoute('route3')" style="min-height: 80rpx; padding: 2rpx; border-radius: 10rpx;margin-bottom: 2rpx; background-color: rgba(255, 255, 255, 0.8); display: flex;justify-content: center;align-items: center;">
|
<image
|
style="width:32rpx;height:32rpx;"
|
:src="`https://farm.evcc.top/Uploads/yuanboyuan/maps/route${currentRoute.routeid=='route3' ? '' : '_'}.png`"
|
/>
|
<text style="font-size: 24rpx; color: #000; margin-top: 4rpx;">
|
线路3
|
</text>
|
</view>
|
|
</view>
|
<map class="map" id="map" ref="map" :latitude="center_lat" :longitude="center_lon" :scale="center_scale" show-location :markers="markers"
|
@tap="getCurrentLocation" :polygons="isPolygons?polygons:[]" :polyline="isPolylines?ploylines:[]" enable-poi @poitap="poitap">
|
<cover-view>
|
<slot name="content"></slot>
|
</cover-view>
|
</map>
|
<!--
|
<map class="map" id="map" ref="map" :latitude="center_lat" :longitude="center_lon" :scale="center_scale" show-location :markers="markers"
|
@tap="getCurrentLocation" :polygons="isPolygons?polygons:[]" enable-poi @poitap="poitap">
|
<cover-view>
|
<slot name="content"></slot>
|
</cover-view>
|
</map>
|
<view class="search">
|
<view class="search-input">
|
<input placeholder="请输入关键词" v-model="searchValue" type="text" maxlength="64" @input="searchMap" />
|
</view>
|
</view>
|
<view class="bot-box">
|
<view class="poi-list">
|
<view class="poi-item" v-for="item in searchList" :key="item.id"
|
@click="getCurrentSingleLocation(item)">
|
<view v-if="searchList.length !== 0">
|
<view class="poi-name">
|
{{ item.name }}
|
</view>
|
<view class="poi-address">
|
<view class="address">{{ item.address }}</view>
|
</view>
|
</view>
|
</view>
|
<view class="empty" v-if="searchList.length == 0">暂无数据, 请更检查key是否有效或者更换关键词</view>
|
</view>
|
</view>
|
-->
|
<view
|
v-if="isPolylines"
|
class="fixed bottom-0 left-0 w-full bg-white shadow-lg border-t border-gray-200"
|
style="height: 120px; display: flex; align-items: center;"
|
>
|
<!-- 关闭按钮 -->
|
<view
|
class="absolute right-2 top-2 z-10 text-gray-400"
|
@click="closeShowRoute"
|
>
|
<text class="text-xl font-bold">×</text>
|
</view>
|
|
<!-- 滚动区域 -->
|
<scroll-view scroll-x class="overflow-x-auto" style="width: 100%; white-space: nowrap;">
|
<view style="display: flex; flex-direction: row; align-items: center;">
|
<template v-for="(item, index) in currentRoute.pois" :key="index">
|
<!-- 名称块 -->
|
<view style="text-align: center; vertical-align: middle; padding: 0 8px; width: 80px;">
|
<view style="display: flex; flex-direction: column; align-items: center; cursor: pointer;" @click="onRoutPointClick(item, index)">
|
<image
|
:src="`https://farm.evcc.top/Uploads/yuanboyuan/maps/badge_${index + 1}.png`"
|
style="width: 32px; height: 32px; border-radius: 50%; margin-bottom: 4px;"
|
/>
|
<view
|
:style="{
|
'font-weight': index === currentRoutePointIndex ? 'bold' : 'normal',
|
color: index === currentRoutePointIndex ? '#0000FF' : '#000',
|
'font-size': '12px'
|
}"
|
>
|
{{ item.name }}
|
</view>
|
</view>
|
</view>
|
<!-- 分隔线 -->
|
<view
|
v-if="index < currentRoute.pois.length - 1"
|
style="text-align: center; vertical-align: middle; color: #9ca3af; user-select: none; width: 120px; white-space: nowrap;"
|
>
|
------
|
</view>
|
</template>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapMarkers } from '../../../../pages/guide/markers.js'
|
import { mapRoutes } from '../../../../pages/guide/routes.js'
|
|
// vue3 导入sdk不兼容 所以直接将sdk写入这个文件
|
function AMapWX(a) {
|
this.key = a.key
|
this.requestConfig = {
|
key: a.key,
|
s: "rsx",
|
platform: "WXJS",
|
appname: a.key,
|
sdkversion: "1.2.0",
|
logversion: "2.0"
|
}
|
}
|
AMapWX.prototype.getWxLocation = function(a, b) {
|
uni.getLocation({
|
type: "gcj02",
|
success: function(a) {
|
var c = a.longitude + "," + a.latitude;
|
uni.setStorage({
|
key: "userLocation",
|
data: c
|
}), b(c)
|
},
|
fail: function(c) {
|
uni.getStorage({
|
key: "userLocation",
|
success: function(a) {
|
a.data && b(a.data)
|
}
|
})
|
}
|
})
|
}
|
AMapWX.prototype.getRegeo = function(a) {
|
function c(c) {
|
var d = b.requestConfig;
|
uni.request({
|
url: "https://restapi.amap.com/v3/geocode/regeo",
|
data: {
|
key: b.key,
|
location: c,
|
extensions: "all",
|
s: d.s,
|
platform: d.platform,
|
appname: b.key,
|
sdkversion: d.sdkversion,
|
logversion: d.logversion
|
},
|
method: "GET",
|
header: {
|
"content-type": "application/json"
|
},
|
success: function(b) {
|
var d, e, f, g, h, i, j, k, l;
|
b.data.status && "1" == b.data.status ? (d = b.data.regeocode,
|
e = d.addressComponent, f = [], g = "", d && d.roads[
|
0] && d.roads[0].name && (g = d.roads[0].name + "附近"), h =
|
c.split(",")[0], i = c.split(",")[1], d.pois && d
|
.pois[0] && (g = d.pois[0].name + "附近", j = d.pois[0]
|
.location, j && (h = parseFloat(j.split(",")[0]), i =
|
parseFloat(j.split(",")[1]))), e.provice && f.push(e
|
.provice), e.city && f.push(e.city), e.district && f.push(
|
e.district), e.streetNumber && e.streetNumber.street && e
|
.streetNumber.number ? (f.push(e.streetNumber.street),
|
f.push(e.streetNumber.number)) : (k = "", d && d.roads[
|
0] && d.roads[0].name && (k = d.roads[0].name), f.push(
|
k)), f = f.join(""), l = [{
|
iconPath: a.iconPath,
|
width: a.iconWidth,
|
height: a.iconHeight,
|
name: f,
|
desc: g,
|
longitude: h,
|
latitude: i,
|
id: 0,
|
regeocodeData: d
|
}], a.success(l)) : a?.fail && a.fail({
|
errCode: b.data.infocode,
|
errMsg: b.data.info
|
})
|
},
|
fail: function(b) {
|
a.fail({
|
errCode: "0",
|
errMsg: b.errMsg || ""
|
})
|
}
|
})
|
}
|
var b = this;
|
a.location ? c(a.location) : b.getWxLocation(a, function(a) {
|
c(a)
|
})
|
}
|
AMapWX.prototype.getWeather = function(a) {
|
function d(d) {
|
var e = "base";
|
a.type && "forecast" == a.type && (e = "all"), uni.request({
|
url: "https://restapi.amap.com/v3/weather/weatherInfo",
|
data: {
|
key: b.key,
|
city: d,
|
extensions: e,
|
s: c.s,
|
platform: c.platform,
|
appname: b.key,
|
sdkversion: c.sdkversion,
|
logversion: c.logversion
|
},
|
method: "GET",
|
header: {
|
"content-type": "application/json"
|
},
|
success: function(b) {
|
function c(a) {
|
var b = {
|
city: {
|
text: "城市",
|
data: a.city
|
},
|
weather: {
|
text: "天气",
|
data: a.weather
|
},
|
temperature: {
|
text: "温度",
|
data: a.temperature
|
},
|
winddirection: {
|
text: "风向",
|
data: a.winddirection + "风"
|
},
|
windpower: {
|
text: "风力",
|
data: a.windpower + "级"
|
},
|
humidity: {
|
text: "湿度",
|
data: a.humidity + "%"
|
}
|
};
|
return b
|
}
|
var d, e;
|
b.data.status && "1" == b.data.status ? b.data.lives ? (d = b
|
.data.lives, d && d.length > 0 && (d = d[0], e = c(
|
d), e["liveData"] = d, a.success(e))) : b.data
|
.forecasts && b.data.forecasts[0] && a.success({
|
forecast: b.data.forecasts[0]
|
}) : a.fail({
|
errCode: b.data.infocode,
|
errMsg: b.data.info
|
})
|
},
|
fail: function(b) {
|
a.fail({
|
errCode: "0",
|
errMsg: b.errMsg || ""
|
})
|
}
|
})
|
}
|
|
function e(e) {
|
uni.request({
|
url: "https://restapi.amap.com/v3/geocode/regeo",
|
data: {
|
key: b.key,
|
location: e,
|
extensions: "all",
|
s: c.s,
|
platform: c.platform,
|
appname: b.key,
|
sdkversion: c.sdkversion,
|
logversion: c.logversion
|
},
|
method: "GET",
|
header: {
|
"content-type": "application/json"
|
},
|
success: function(b) {
|
var c, e;
|
b.data.status && "1" == b.data.status ? (e = b.data.regeocode, e
|
.addressComponent ? c = e.addressComponent.adcode :
|
e.aois && e.aois.length > 0 && (c = e.aois[0].adcode), d(c)
|
) : a.fail({
|
errCode: b.data.infocode,
|
errMsg: b.data.info
|
})
|
},
|
fail: function(b) {
|
a.fail({
|
errCode: "0",
|
errMsg: b.errMsg || ""
|
})
|
}
|
})
|
}
|
var b = this,
|
c = b.requestConfig;
|
a.city ? d(a.city) : b.getWxLocation(a, function(a) {
|
e(a)
|
})
|
}
|
AMapWX.prototype.getPoiAround = function(a) {
|
function d(d) {
|
var e = {
|
key: b.key,
|
location: d,
|
s: c.s,
|
platform: c.platform,
|
appname: b.key,
|
sdkversion: c.sdkversion,
|
logversion: c.logversion
|
};
|
a.querytypes && (e["types"] = a.querytypes), a.querykeywords && (e[
|
"keywords"] = a.querykeywords), uni.request({
|
url: "https://restapi.amap.com/v3/place/around",
|
data: e,
|
method: "GET",
|
header: {
|
"content-type": "application/json"
|
},
|
success: function(b) {
|
var c, d, e, f;
|
if (b.data.status && "1" == b.data.status) {
|
if (b = b.data, b && b.pois) {
|
for (c = [], d = 0; d < b.pois.length; d++) e = 0 == d ? a
|
.iconPathSelected : a.iconPath, c.push({
|
latitude: parseFloat(b.pois[d].location.split(",")[
|
1]),
|
longitude: parseFloat(b.pois[d].location.split(",")[
|
0]),
|
iconPath: e,
|
width: 22,
|
height: 32,
|
id: d,
|
name: b.pois[d].name,
|
address: b.pois[d].address
|
});
|
f = {
|
markers: c,
|
poisData: b.pois
|
}, a.success(f)
|
}
|
} else a.fail({
|
errCode: b.data.infocode,
|
errMsg: b.data.info
|
})
|
},
|
fail: function(b) {
|
a.fail({
|
errCode: "0",
|
errMsg: b.errMsg || ""
|
})
|
}
|
})
|
}
|
var b = this,
|
c = b.requestConfig;
|
a.location ? d(a.location) : b.getWxLocation(a, function(a) {
|
d(a)
|
})
|
}
|
AMapWX.prototype.getStaticmap = function(a) {
|
function f(b) {
|
c.push("location=" + b), a.zoom && c.push("zoom=" + a.zoom), a.size && c
|
.push("size=" + a.size), a.scale && c.push(
|
"scale=" + a.scale), a.markers && c.push("markers=" + a.markers), a
|
.labels && c.push("labels=" + a.labels), a.paths &&
|
c.push("paths=" + a.paths), a.traffic && c.push("traffic=" + a.traffic);
|
var e = d + c.join("&");
|
a.success({
|
url: e
|
})
|
}
|
var e, b = this,
|
c = [],
|
d = "https://restapi.amap.com/v3/staticmap?";
|
c.push("key=" + b.key), e = b.requestConfig, c.push("s=" + e.s), c.push(
|
"platform=" + e.platform), c.push("appname=" +
|
e.appname), c.push("sdkversion=" + e.sdkversion), c.push("logversion=" +
|
e.logversion), a.location ? f(a.location) :
|
b.getWxLocation(a, function(a) {
|
f(a)
|
})
|
}
|
AMapWX.prototype.getInputtips = function(a) {
|
var b = this,
|
c = b.requestConfig,
|
d = {
|
key: b.key,
|
s: c.s,
|
platform: c.platform,
|
appname: b.key,
|
sdkversion: c.sdkversion,
|
logversion: c.logversion
|
};
|
a.location && (d["location"] = a.location), a.keywords && (d["keywords"] = a
|
.keywords), a.type && (d["type"] = a.type),
|
a.city && (d["city"] = a.city), a.citylimit && (d["citylimit"] = a
|
.citylimit), uni.request({
|
url: "https://restapi.amap.com/v3/assistant/inputtips",
|
data: d,
|
method: "GET",
|
header: {
|
"content-type": "application/json"
|
},
|
success: function(b) {
|
b && b.data && b.data.tips && a.success({
|
tips: b.data.tips
|
})
|
},
|
fail: function(b) {
|
a.fail({
|
errCode: "0",
|
errMsg: b.errMsg || ""
|
})
|
}
|
})
|
}
|
AMapWX.prototype.getDrivingRoute = function(a) {
|
var b = this,
|
c = b.requestConfig,
|
d = {
|
key: b.key,
|
s: c.s,
|
platform: c.platform,
|
appname: b.key,
|
sdkversion: c.sdkversion,
|
logversion: c.logversion
|
};
|
a.origin && (d["origin"] = a.origin),
|
a.destination && (d["destination"] = a.destination),
|
a.strategy && (d["strategy"] = a.strategy),
|
a.waypoints && (d["waypoints"] = a.waypoints),
|
a.avoidpolygons && (d["avoidpolygons"] = a.avoidpolygons),
|
a.avoidroad && (d["avoidroad"] = a.avoidroad),
|
uni.request({
|
url: "https://restapi.amap.com/v3/direction/driving",
|
data: d,
|
method: "GET",
|
header: {
|
"content-type": "application/json"
|
},
|
success: function(b) {
|
b && b.data && b.data.route && a.success({
|
paths: b.data.route.paths,
|
taxi_cost: b.data.route.taxi_cost || ""
|
})
|
},
|
fail: function(b) {
|
a.fail({
|
errCode: "0",
|
errMsg: b.errMsg || ""
|
})
|
}
|
})
|
}
|
AMapWX.prototype.getWalkingRoute = function(a) {
|
var b = this,
|
c = b.requestConfig,
|
d = {
|
key: b.key,
|
s: c.s,
|
platform: c.platform,
|
appname: b.key,
|
sdkversion: c.sdkversion,
|
logversion: c.logversion
|
};
|
a.origin && (d["origin"] = a.origin), a.destination && (d["destination"] = a
|
.destination), uni.request({
|
url: "https://restapi.amap.com/v3/direction/walking",
|
data: d,
|
method: "GET",
|
header: {
|
"content-type": "application/json"
|
},
|
success: function(b) {
|
b && b.data && b.data.route && a.success({
|
paths: b.data.route.paths
|
})
|
},
|
fail: function(b) {
|
a.fail({
|
errCode: "0",
|
errMsg: b.errMsg || ""
|
})
|
}
|
})
|
}
|
AMapWX.prototype.getTransitRoute = function(a) {
|
var b = this,
|
c = b.requestConfig,
|
d = {
|
key: b.key,
|
s: c.s,
|
platform: c.platform,
|
appname: b.key,
|
sdkversion: c.sdkversion,
|
logversion: c.logversion
|
};
|
a.origin && (d["origin"] = a.origin), a.destination && (d["destination"] = a
|
.destination), a.strategy && (d[
|
"strategy"] = a.strategy), a.city && (d["city"] = a.city), a.cityd && (
|
d["cityd"] = a.cityd), uni.request({
|
url: "https://restapi.amap.com/v3/direction/transit/integrated",
|
data: d,
|
method: "GET",
|
header: {
|
"content-type": "application/json"
|
},
|
success: function(b) {
|
if (b && b.data && b.data.route) {
|
var c = b.data.route;
|
a.success({
|
distance: c.distance || "",
|
taxi_cost: c.taxi_cost || "",
|
transits: c.transits
|
})
|
}
|
},
|
fail: function(b) {
|
a.fail({
|
errCode: "0",
|
errMsg: b.errMsg || ""
|
})
|
}
|
})
|
}
|
AMapWX.prototype.getRidingRoute = function(a) {
|
var b = this,
|
c = b.requestConfig,
|
d = {
|
key: b.key,
|
s: c.s,
|
platform: c.platform,
|
appname: b.key,
|
sdkversion: c.sdkversion,
|
logversion: c.logversion
|
};
|
a.origin && (d["origin"] = a.origin), a.destination && (d["destination"] = a
|
.destination), uni.request({
|
url: "https://restapi.amap.com/v4/direction/bicycling",
|
data: d,
|
method: "GET",
|
header: {
|
"content-type": "application/json"
|
},
|
success: function(b) {
|
b && b.data && b.data.data && a.success({
|
paths: b.data.data.paths
|
})
|
},
|
fail: function(b) {
|
a.fail({
|
errCode: "0",
|
errMsg: b.errMsg || ""
|
})
|
}
|
})
|
}
|
|
export default {
|
name: 'amap',
|
props: {
|
longitude: {
|
type: String,
|
default: ''
|
},
|
latitude: {
|
type: String,
|
default: ''
|
},
|
mapKey: {
|
require: true,
|
type: String,
|
default: ''
|
},
|
marker: {
|
type: Object,
|
default: () => {}
|
},
|
disable: {
|
type: Boolean,
|
default: false
|
},
|
isPolygons: {
|
type: Boolean,
|
default: false
|
},
|
polygons: {
|
type: Array,
|
default: () => []
|
},
|
top: {
|
type: [String, Number],
|
default: 30
|
},
|
isCustomBar: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
statusBarH: 0,
|
customBarH: 0,
|
addressMap: '',
|
searchValue: '',
|
markers: [],
|
amapPlugin: null,
|
key: this.$props?.mapKey, //高德地图key https://console.amap.com/dev/key/app 服务平台选择微信小程序
|
center_lat: this.$props?.latitude,
|
center_lon: this.$props?.longitude,
|
center_scale:16,
|
regeocodeData: {},
|
searchList: [],
|
markerShow:[
|
{ id: 'scenic', name: '景点', show: false },
|
{ id: 'toilet', name: '厕所', show: false },
|
{ id: 'parking', name: '停车', show: false },
|
{ id: 'food', name: '餐饮', show: false },
|
{ id: 'shop', name: '商店', show: false },
|
{ id: 'hospital', name: '医院', show: false },
|
{ id: 'police', name: '警室', show: false }
|
],
|
isPolylines: false,
|
ploylines: [],
|
route :null,
|
currentRoute:{
|
routeid:null
|
},
|
currentRoutePointIndex:null
|
};
|
},
|
onShow() {
|
if (!this._mapContext) {
|
// 等地图 ready 再创建
|
this.$nextTick(() => {
|
this._mapContext = uni.createMapContext('map', this)
|
})
|
}
|
},
|
created() {
|
this.init();
|
let self = this
|
uni.getSystemInfo({
|
success: function(e) {
|
self.statusBarH = e.statusBarHeight + 5
|
if (uni.getMenuButtonBoundingClientRect?.()) {
|
let custom = uni.getMenuButtonBoundingClientRect()
|
self.customBarH = custom.height + 5
|
} else {
|
self.customBarH = 30
|
}
|
},
|
})
|
},
|
methods: {
|
changeMarkers() {
|
this.markers[0] = {
|
...this.$props?.marker,
|
longitude: this.center_lon,
|
latitude: this.center_lat
|
};
|
},
|
init() {
|
this.amapPlugin = new AMapWX({
|
key: this.key
|
});
|
const detail = {
|
longitude: this.$props?.longitude,
|
latitude: this.$props?.latitude
|
};
|
|
if (!detail.latitude || !detail.longitude) {
|
const _this = this;
|
uni.getLocation({
|
type: 'gcj02',
|
isHighAccuracy: true,
|
success: (data) => {
|
detail.latitude = data.latitude;
|
detail.longitude = data.longitude;
|
_this.getCurrentLocation({
|
detail
|
});
|
}
|
});
|
} else {
|
this.getCurrentLocation({
|
detail
|
});
|
}
|
},
|
poitap(e) {
|
//this.getCurrentLocation(e)
|
console.log(e)
|
},
|
//点击地图
|
getCurrentLocation(e) {
|
this.searchValue = '';
|
const {
|
latitude,
|
longitude
|
} = e.detail;
|
console.log(longitude)
|
console.log(latitude)
|
if (!latitude || !longitude) return;
|
this.getRegeo([longitude, latitude], (pois) => {
|
this.searchList = pois;
|
})
|
},
|
getInputtips() {
|
this.amapPlugin.getInputtips({
|
key: this.key,
|
keywords: this.searchValue,
|
location: this.center_lon + ',' + this.center_lat,
|
success: (data) => {
|
this.searchList = data.tips.filter((i) => i?.id?.length && i?.location);
|
}
|
});
|
},
|
getRegeo(coordinate, fn) {
|
this.center_lat = coordinate[1];
|
this.center_lon = coordinate[0];
|
this.changeMarkers();
|
this.amapPlugin.getRegeo({
|
location: this.center_lon + ',' + this.center_lat,
|
success: (data) => {
|
const {
|
regeocodeData
|
} = data[0];
|
this.addressMap = regeocodeData.formatted_address;
|
this.regeocodeData = regeocodeData;
|
this.$emit('changeMarker', this.getConfirmData());
|
fn && fn(regeocodeData.pois);
|
}
|
});
|
},
|
//搜索关键字
|
searchMap() {
|
this.getInputtips();
|
},
|
getCurrentSingleLocation(data) {
|
let coordinate = data.location.split(',');
|
this.searchValue = data.name;
|
this.getRegeo(coordinate);
|
},
|
close() {
|
this.$emit('confirm');
|
},
|
getConfirmData() {
|
const {
|
pois,
|
addressComponent: {
|
province,
|
district,
|
township
|
}
|
} = this.regeocodeData;
|
const title = pois?.[0]?.name || province + district + township;
|
return {
|
...this.regeocodeData,
|
title,
|
latitude: this.center_lat,
|
longitude: this.center_lon,
|
address: this.addressMap
|
}
|
|
},
|
submit(e) {
|
if (this.$props.disable) {
|
return;
|
}
|
if (!this.addressMap) {
|
return;
|
}
|
if (JSON.stringify(this.regeocodeData) != '{}') {
|
this.$emit('confirm', this.getConfirmData());
|
}
|
},
|
gotoHome(){
|
this.checkMapContext();
|
const _this = this;
|
console.log(this._mapContext)
|
this.center_lat = 31.0125237588488 ;
|
this.center_lon = 112.1783132134475;
|
this.center_scale = 16;
|
this._mapContext.moveToLocation({latitude:31.0125237588488,longitude:112.1783132134475});
|
|
/*({
|
type: 'gcj02',
|
isHighAccuracy: true,
|
success: (data) => {
|
console.log(data)
|
_this.center_lat = data.latitude;
|
_this.center_lon = data.longitude;
|
_this.center_scale = 16;
|
_this._mapContext.moveToLocation({latitude:data.latitude,longitude:data.longitude});
|
|
|
}
|
});
|
*/
|
this.addMarkers();
|
},
|
checkMapContext(){
|
if (!this._mapContext) {
|
this._mapContext = uni.createMapContext('map', this)
|
}
|
},
|
toggleMarker(item){
|
item.show = !item.show
|
this.addMarkers()
|
},
|
closeShowRoute(){
|
this.isPolylines = false;
|
//this.currentRoute.routeid = null;
|
this.addMarkers();
|
},
|
onRoutPointClick (item,index){
|
console.log(item);
|
this.currentRoutePointIndex = index
|
this.checkMapContext();
|
this._mapContext.moveToLocation({latitude:item.latitude,longitude:item.longitude});
|
},
|
addMarkers() {
|
const _markers = []
|
// 遍历所有类型定义
|
console.log(mapMarkers)
|
mapMarkers.forEach(group => {
|
const type = group.type
|
//if (this.markerShow[type]) {
|
if (this.markerShow.find(item => item.id === type)?.show) {
|
// 解构公共属性
|
const { iconPath, width, height, label, pois } = group
|
pois.forEach((poi, index) => {
|
_markers.push({
|
id: poi.id,
|
iconPath,
|
width,
|
height,
|
longitude: poi.longitude,
|
latitude: poi.latitude,
|
label: {
|
...label,
|
content: poi.name || `${type} ${index + 1}`
|
}
|
})
|
})
|
}
|
})
|
this.checkMapContext();
|
this._mapContext.addMarkers({
|
markers:_markers,
|
clear: true,
|
complete(res) {
|
console.log('addMarkers', res)
|
}
|
})
|
},
|
showRoute(routeid){
|
this.isPolylines = false;
|
this.currentRoutePointIndex = null;
|
this.checkMapContext();
|
const route = mapRoutes.find(r => r.routeid === routeid)
|
this.currentRoute = route;
|
const allRouteMarkerid = []
|
|
mapRoutes.forEach(route => {
|
allRouteMarkerid.push(route.markerid)
|
})
|
if (!route) {
|
console.error('Route not found:', routeid)
|
return
|
}
|
console.log(route)
|
const pois = route.pois
|
if (!pois || pois.length === 0) {
|
console.error('No POIs found for route:', routeid)
|
return
|
}
|
try{
|
this._mapContext.removeMarkers({
|
markerIds: allRouteMarkerid
|
})
|
}catch (err) {
|
console.warn('删除 marker 时出现异常：', err)
|
}
|
|
const routeMarker = {
|
id: route.markerid,
|
iconPath: route.iconPath,
|
width: route.width,
|
height: route.height,
|
longitude: pois[0].longitude,
|
latitude: pois[0].latitude,
|
}
|
const routePointMarker = route.pois.map((poi, index) => ({
|
id: index+1, // 从0开始的唯一ID
|
iconPath: `https://farm.evcc.top/Uploads/yuanboyuan/maps/badge_${index + 1}.png`, // 替换 {} 为索引+1
|
width: 15,
|
height: 15,
|
longitude: poi.longitude,
|
latitude: poi.latitude,
|
label: {
|
width: 60,
|
height: 30,
|
borderWidth: 1,
|
borderRadius: 10,
|
bgColor: '#333333',
|
color: '#ffffff',
|
content:poi.name,
|
fontSize: 12,
|
textAlign: 'center',
|
},
|
}));
|
|
routePointMarker.push(routeMarker);
|
|
console.log(routePointMarker);
|
|
this.isPolylines = true;
|
this.ploylines = [
|
{
|
name:route.routename,
|
arrowLine : true,
|
color:'#27bd09e6',
|
id :route.routeid,
|
width:3,
|
points:route.pois
|
}
|
]
|
|
this._mapContext.addMarkers({
|
//markers: [routeMarker],
|
markers: routePointMarker,
|
clear: true,
|
success: () => {
|
console.log('新路线 marker 已添加')
|
// 开始沿路线移动
|
this._mapContext.moveAlong({
|
markerId: route.markerid,
|
path: route.pois,
|
duration: route.duration,
|
autoRotate: true,
|
fail: (err) => {
|
this._mapContext.moveAlong({
|
markerId: route.markerid,
|
path: route.pois,
|
duration: route.duration,
|
autoRotate: true
|
})
|
}
|
})
|
},
|
fail: (err) => console.error('添加 marker 失败：', err)
|
})
|
|
}
|
}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.map-content {
|
position: fixed;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
z-index: 99;
|
background-color: #fff;
|
|
.top {
|
position: absolute;
|
width: 100%;
|
height: 80rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10rpx 40rpx;
|
box-sizing: border-box;
|
background-color: rgba(0, 0, 0, 0.2);
|
color: #fff;
|
z-index: 999;
|
|
.route {
|
border: 1px solid #22c55e;
|
border-radius: 3px;
|
padding: 3px 4px;
|
color: #22c55e;
|
background-color: #f0fdf4;
|
transition: all 0.2s;
|
}
|
|
.confirm {
|
height: 60rpx;
|
line-height: 60rpx;
|
padding: 0 20rpx;
|
border-radius: 10rpx;
|
background-color: #42b983;
|
}
|
|
.address-text {
|
width: 55vw;
|
text-align: center;
|
overflow: hidden;
|
word-wrap: break-word;
|
display: -webkit-box;
|
-webkit-line-clamp: 1;
|
-webkit-box-orient: vertical;
|
}
|
}
|
.top-left {
|
position: absolute;
|
top: 0rpx;
|
left:30rpx;
|
width :30rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
padding: 2rpx;
|
box-sizing: border-box;
|
z-index: 999;
|
|
.confirm {
|
min-height: 80rpx; /* 调整高度以容纳图片+文本 */
|
padding: 2rpx; /* 调整内边距 */
|
border-radius: 10rpx;
|
margin-bottom: 2rpx; /* 增加间距 */
|
background-color: rgba(255, 255, 255, 0.8); /* 可选：添加背景以增强可读性 */
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.home {
|
width: 32px;
|
height: 32px;
|
}
|
}
|
}
|
|
.map {
|
position: relative;
|
width: 100vw;
|
height: 100vh;
|
|
.position-icon {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
width: 50px;
|
height: 40px;
|
margin-top: -12px;
|
transform: translate(-50%, -50%);
|
}
|
}
|
|
.search {
|
padding: 10rpx 20rpx;
|
display: flex;
|
justify-content: center;
|
background-color: #fff;
|
|
input {
|
flex: 1;
|
width: calc(100vw - 80rpx);
|
padding: 0 20rpx;
|
height: 60rpx;
|
border: 1px solid #ccc;
|
border-radius: 10rpx;
|
}
|
}
|
|
.bot-box {
|
|
height: calc(50vh - 50px);
|
overflow: auto;
|
width: 100vw;
|
background-color: #fff;
|
|
.empty {
|
margin-top: 40rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.poi-list {
|
padding: 0 $uni-spacing-row-base;
|
box-sizing: border-box;
|
|
.poi-item {
|
margin: 20rpx 0;
|
padding: 10rpx;
|
border: 1px solid $uni-border-color;
|
border-radius: $uni-border-radius-base;
|
|
.poi-name {
|
font-size: 34rpx;
|
color: #333;
|
}
|
|
.poi-address {
|
.address {
|
width: 100%;
|
font-size: 26rpx;
|
overflow: hidden;
|
color: #999;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
|
.poi-item:active {
|
color: #fff;
|
border: 1px solid #42b983;
|
}
|
}
|
}
|
}
|
</style>
|
