553 lines
22 KiB
Plaintext
553 lines
22 KiB
Plaintext
<template>
|
|
<view class="uni-open-location" :class="classCom">
|
|
<view class="uni-open-location-map-box">
|
|
<map class="uni-open-location-map" :id="mapId" :ref="mapId" :latitude="latitude" :longitude="longitude" :scale="openLocationOptions.scale" :markers="markers"
|
|
:layer-style="theme == 'dark' ? '2' : '1'" :show-compass="false" :enable-zoom="true" :enable-scroll="true" :enable-rotate="false" :enable-poi="true" :show-location="true">
|
|
</map>
|
|
<view class="uni-open-location-map-reset" @click="mapReset">
|
|
<text class="uni-open-location-icons uni-open-location-map-reset-icon">{{ icon.position }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="uni-open-location-nav" :style="'height:' + (60 + safeArea.top) + 'px;'">
|
|
<view class="uni-open-location-nav-btn uni-open-location-nav-back-btn" :class="[landscapeClassCom]" :style="safeArea.top > 0 ? 'top: ' + safeArea.top + 'px;' : ''"><text
|
|
class="uni-open-location-nav-text uni-open-location-nav-back-text uni-open-location-icons" @click="back">{{ icon.back }}</text></view>
|
|
</view>
|
|
<view class="uni-open-location-footer">
|
|
<view class="uni-open-location-address">
|
|
<text class="uni-open-location-name-text">
|
|
{{ openLocationOptions.name }}
|
|
</text>
|
|
<text class="uni-open-location-address-text">
|
|
{{ openLocationOptions.address }}
|
|
</text>
|
|
</view>
|
|
<view class="uni-open-location-footer-icon-btns">
|
|
<view class="uni-open-location-footer-icon-btns-item" @click="navigation">
|
|
<view class="uni-open-location-footer-icon-box">
|
|
<text class="uni-open-location-icons">{{ icon.navigation }}</text>
|
|
</view>
|
|
<text class="uni-open-location-footer-btn-text">{{ languageCom['navigation'] }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="uts">
|
|
import { openSchema } from '@/uni_modules/uts-openSchema'
|
|
// #ifdef APP
|
|
import { canOpenURL } from '@/uni_modules/uts-openSchema'
|
|
// #endif
|
|
|
|
import targetPath from '@/uni_modules/uni-openLocation/pages/openLocation/target.png'
|
|
|
|
//const targetPath = '/uni_modules/uni-openLocation/static/target.png'
|
|
|
|
type AafeArea = {
|
|
top : number,
|
|
bottom : number,
|
|
left : number,
|
|
right : number
|
|
}
|
|
|
|
type IconPath = {
|
|
target : string,
|
|
position : string,
|
|
navigation : string,
|
|
back : string,
|
|
}
|
|
|
|
const languageData = {
|
|
"en": {
|
|
"navigation": "navigation"
|
|
},
|
|
"zh-Hans": {
|
|
"navigation": "导航"
|
|
},
|
|
"zh-Hant": {
|
|
"navigation": "導航"
|
|
}
|
|
};
|
|
|
|
export default {
|
|
data() {
|
|
const id1 = `UniMap1_${(Math.random() * 10e5).toString(36)}` as string;
|
|
return {
|
|
readyEventName: '',
|
|
optionsEventName: '',
|
|
successEventName: '',
|
|
failEventName: '',
|
|
openLocationOptions: {
|
|
latitude: 0,
|
|
longitude: 0,
|
|
scale: 18,
|
|
name: '',
|
|
address: ''
|
|
} as OpenLocationOptions,
|
|
safeArea: {
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0
|
|
} as AafeArea,
|
|
icon: {
|
|
target: '\ue683',
|
|
position: '\ue653',
|
|
navigation: '\ue640',
|
|
back: '\ue651',
|
|
} as IconPath,
|
|
language: "zh-Hans",
|
|
isLandscape: false,
|
|
theme: "light",
|
|
mapId: id1,
|
|
latitude: 0,
|
|
longitude: 0,
|
|
markers: [] as Marker[]
|
|
}
|
|
},
|
|
onLoad(options : UTSJSONObject) {
|
|
this.initPageOptions(options);
|
|
this.getSystemInfo();
|
|
},
|
|
onReady() {
|
|
|
|
},
|
|
onUnload() {
|
|
uni.$off(this.optionsEventName, null);
|
|
uni.$off(this.readyEventName, null);
|
|
uni.$off(this.successEventName, null);
|
|
uni.$off(this.failEventName, null);
|
|
// #ifdef APP-IOS
|
|
__uniappx__nativeEventBus.off(this.optionsEventName, null)
|
|
__uniappx__nativeEventBus.off(this.readyEventName, null)
|
|
__uniappx__nativeEventBus.off(this.successEventName, null)
|
|
__uniappx__nativeEventBus.off(this.failEventName, null)
|
|
// #endif
|
|
},
|
|
onResize() {
|
|
const systemInfo = uni.getSystemInfoSync();
|
|
this.isLandscape = systemInfo.deviceOrientation == 'landscape';
|
|
},
|
|
methods: {
|
|
initPageOptions(options : UTSJSONObject) {
|
|
this.readyEventName = options['readyEventName']! as string;
|
|
this.optionsEventName = options['optionsEventName']! as string;
|
|
this.successEventName = options['successEventName']! as string;
|
|
this.failEventName = options['failEventName']! as string;
|
|
uni.$on(this.optionsEventName, (data : UTSJSONObject) => {
|
|
console.log('data: ', JSON.stringify(data))
|
|
if (data['latitude'] != null) {
|
|
this.openLocationOptions.latitude = data['latitude'] as number;
|
|
this.latitude = this.openLocationOptions.latitude;
|
|
}
|
|
if (data['longitude'] != null) {
|
|
this.openLocationOptions.longitude = data['longitude'] as number;
|
|
this.longitude = this.openLocationOptions.longitude;
|
|
}
|
|
if (data['scale'] != null) {
|
|
this.openLocationOptions.scale = data['scale'] as number;
|
|
}
|
|
if (data['name'] != null) {
|
|
this.openLocationOptions.name = data['name'] as string;
|
|
}
|
|
if (data['address'] != null) {
|
|
this.openLocationOptions.address = data['address'] as string;
|
|
}
|
|
setTimeout(() => {
|
|
this.markers = [
|
|
{
|
|
id: 1,
|
|
latitude: this.openLocationOptions.latitude,
|
|
longitude: this.openLocationOptions.longitude,
|
|
iconPath: targetPath,
|
|
width: 50,
|
|
height: 50
|
|
} as Marker
|
|
] as Marker[];
|
|
}, 300);
|
|
uni.$emit(this.successEventName, {});
|
|
});
|
|
uni.$emit(this.readyEventName, {});
|
|
},
|
|
getSystemInfo() {
|
|
const info = uni.getWindowInfo();
|
|
this.safeArea.top = info.safeAreaInsets.top;
|
|
this.safeArea.bottom = info.safeAreaInsets.bottom;
|
|
this.safeArea.left = info.safeAreaInsets.left;
|
|
this.safeArea.right = info.safeAreaInsets.right;
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
// const osLanguage = systemInfo.osLanguage
|
|
const appLanguage = systemInfo.appLanguage
|
|
this.language = appLanguage
|
|
const osTheme = systemInfo.osTheme
|
|
const appTheme = systemInfo.appTheme
|
|
if (appTheme != null && appTheme != "auto") {
|
|
this.theme = appTheme
|
|
} else if (osTheme != null) {
|
|
this.theme = osTheme
|
|
}
|
|
this.isLandscape = systemInfo.deviceOrientation == 'landscape'
|
|
// #ifdef WEB
|
|
const hostTheme = systemInfo.hostTheme
|
|
if (hostTheme != null) {
|
|
this.theme = hostTheme
|
|
}
|
|
const locale = uni.getLocale()
|
|
this.language = locale
|
|
uni.onLocaleChange((res) => {
|
|
if (res.locale) {
|
|
this.language = res.locale
|
|
}
|
|
})
|
|
uni.onThemeChange((res) => {
|
|
this.theme = res.theme
|
|
});
|
|
// #endif
|
|
// #ifdef APP-ANDROID || APP-IOS
|
|
uni.onAppThemeChange((res : AppThemeChangeResult) => {
|
|
this.theme = res.appTheme
|
|
})
|
|
uni.onOsThemeChange((res : OsThemeChangeResult) => {
|
|
this.theme = res.osTheme
|
|
})
|
|
// #endif
|
|
},
|
|
closeDialogPage() {
|
|
// #ifdef APP-ANDROID
|
|
uni.closeDialogPage({
|
|
dialogPage: this.$page
|
|
} as io.dcloud.uniapp.framework.extapi.CloseDialogPageOptions)
|
|
// #endif
|
|
// #ifndef APP-ANDROID
|
|
uni.closeDialogPage({
|
|
dialogPage: this.$page
|
|
})
|
|
// #endif
|
|
},
|
|
back() {
|
|
this.closeDialogPage();
|
|
},
|
|
getMapContext() : MapContext | null {
|
|
return uni.createMapContext(this.mapId, this);
|
|
},
|
|
moveToLocation() {
|
|
const mapContext = this.getMapContext();
|
|
if (mapContext != null) {
|
|
mapContext.moveToLocation({});
|
|
}
|
|
},
|
|
mapReset() {
|
|
this.moveToLocation();
|
|
},
|
|
navigation() {
|
|
const appBaseInfo = uni.getAppBaseInfo();
|
|
// #ifdef APP-ANDROID
|
|
const src = appBaseInfo.packageName;
|
|
// #endif
|
|
// #ifdef APP-IOS
|
|
const src = appBaseInfo.bundleId;
|
|
// #endif
|
|
// #ifdef WEB
|
|
const src = 'webapp.baidu.openAPIdemo';
|
|
// #endif
|
|
// #ifdef APP-HARMONY
|
|
const src = appBaseInfo.packageName;
|
|
// #endif
|
|
|
|
const list = ["腾讯地图", "高德地图", "百度地图"] as Array<string>;
|
|
// #ifdef APP-IOS
|
|
list.push("苹果地图");
|
|
// #endif
|
|
// #ifdef APP-HARMONY
|
|
// TODO: 华为地图有问题，暂不支持
|
|
// list.push("华为地图");
|
|
// #endif
|
|
uni.showActionSheet({
|
|
itemList: list,
|
|
success: (res) => {
|
|
let index = res.tapIndex;
|
|
if (index >= 0) {
|
|
let item = list[index] as string;
|
|
try {
|
|
let url = "";
|
|
if (item == "腾讯地图") {
|
|
// #ifdef APP
|
|
url = `qqmap://map/routeplan?type=drive&from=我的位置&fromcoord=CurrentLocation&to=${this.openLocationOptions.name}&tocoord=${this.openLocationOptions.latitude},${this.openLocationOptions.longitude}&referer=1`;
|
|
// #endif
|
|
// #ifdef WEB
|
|
url = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${this.openLocationOptions.latitude},${this.openLocationOptions.longitude};title:${this.openLocationOptions.name};addr:${this.openLocationOptions.address}&referer=1`;
|
|
// #endif
|
|
} else if (item == "高德地图") {
|
|
// #ifdef APP-ANDROID
|
|
url = `androidamap://route/plan/?sourceApplication=${src}&slat=&slon=&sname=我的位置&dlat=${this.openLocationOptions.latitude}&dlon=${this.openLocationOptions.longitude}&dname=${this.openLocationOptions.name}&dev=0&t=0`;
|
|
// #endif
|
|
// #ifdef APP-IOS
|
|
url = `iosamap://path?sourceApplication=${src}&slat=&slon=&sname=我的位置&dlat=${this.openLocationOptions.latitude}&dlon=${this.openLocationOptions.longitude}&dname=${this.openLocationOptions.name}&dev=0&t=0`;
|
|
// #endif
|
|
// #ifdef WEB
|
|
url = `https://uri.amap.com/navigation?to=${this.openLocationOptions.longitude},${this.openLocationOptions.latitude},${this.openLocationOptions.name},${this.openLocationOptions.address}&mode=car&policy=0&src=mypage&coordinate=gaode&callnative=1`;
|
|
// #endif
|
|
// #ifdef APP-HARMONY
|
|
url = `amapuri://route/plan?dlat=${this.openLocationOptions.latitude}&dlon=${this.openLocationOptions.longitude}&dname=${this.openLocationOptions.name}&sname=我的位置&t=0&sourceApplication=${src}`;
|
|
// #endif
|
|
} else if (item == "百度地图") {
|
|
// #ifdef APP
|
|
url = `baidumap://map/direction?origin=我的位置&destination=latlng:${this.openLocationOptions.latitude},${this.openLocationOptions.longitude}|name:${this.openLocationOptions.name}&coord_type=gcj02&mode=driving&src=${src}`;
|
|
// #endif
|
|
// #ifdef WEB
|
|
url = `https://api.map.baidu.com/marker?coord_type=gcj02&location=${this.openLocationOptions.latitude},${this.openLocationOptions.longitude}&title=${this.openLocationOptions.name}&content=${this.openLocationOptions.address}&output=html&src=${src}`;
|
|
// #endif
|
|
} else if (item == "苹果地图") {
|
|
// #ifdef APP-IOS
|
|
url = `maps://?ll=${this.openLocationOptions.latitude},${this.openLocationOptions.longitude}&q=${this.openLocationOptions.name}`;
|
|
// #endif
|
|
} else if (item == "华为地图") {
|
|
// #ifdef APP-HARMONY
|
|
url = `petalmaps://route?saddr=我的位置&daddr=${this.openLocationOptions.latitude},${this.openLocationOptions.longitude}&type=drive&utm_source=${src}`;
|
|
// #endif
|
|
}
|
|
if (url != "") {
|
|
// #ifdef APP-HARMONY
|
|
try {
|
|
openSchema(url);
|
|
} catch(err){
|
|
uni.showToast({
|
|
title: `打开失败${err.message}`,
|
|
icon: "none"
|
|
});
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef APP-ANDROID || APP-IOS
|
|
let schemaPrefix = "";
|
|
const schemaIndex = url.indexOf('?');
|
|
if (schemaIndex != -1) {
|
|
schemaPrefix = url.substring(0, schemaIndex);
|
|
}
|
|
if (canOpenURL(schemaPrefix)) {
|
|
openSchema(url);
|
|
} else {
|
|
uni.showToast({
|
|
title: `请先安装${item}`,
|
|
icon: "none"
|
|
});
|
|
}
|
|
// #endif
|
|
|
|
// #ifdef WEB
|
|
window.open(url);
|
|
// #endif
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
computed: {
|
|
languageCom() : UTSJSONObject {
|
|
const textInfo = languageData[this.language] != null ? languageData[this.language] as UTSJSONObject : languageData['zh-Hans'] as UTSJSONObject;
|
|
return textInfo;
|
|
},
|
|
classCom() : string {
|
|
let list = [] as Array<string>;
|
|
if (this.theme == 'dark') {
|
|
list.push('uni-open-location-dark');
|
|
} else {
|
|
list.push('uni-open-location-light');
|
|
}
|
|
return list.join(' ');
|
|
},
|
|
landscapeClassCom() : string {
|
|
return this.isLandscape ? 'uni-open-location-landscape' : '';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: UniOpenLocationFontFamily;
|
|
src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
|
|
}
|
|
|
|
.uni-open-location-icons {
|
|
font-family: "UniOpenLocationFontFamily";
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.uni-open-location {
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f8f8f8;
|
|
z-index: 999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-map-box {
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-map-reset {
|
|
position: absolute;
|
|
left: 20px;
|
|
bottom: 40px;
|
|
width: 40px;
|
|
height: 40px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
pointer-events: auto;
|
|
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .3);
|
|
z-index: 9;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-map-reset .uni-open-location-map-reset-icon {
|
|
font-size: 26px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-nav {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60px;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-nav .uni-open-location-nav-btn {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 5px;
|
|
width: 44px;
|
|
height: 44px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-nav .uni-open-location-nav-btn.uni-open-location-nav-back-btn .uni-open-location-nav-back-text {
|
|
color: #fff;
|
|
font-size: 26px;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-footer {
|
|
height: 150px;
|
|
border-radius: 10px 10px 0px 0px;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0px 20px;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-footer .uni-open-location-address {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-footer .uni-open-location-name-text {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-footer .uni-open-location-address-text {
|
|
font-size: 16px;
|
|
margin-top: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-footer-icon-btns {
|
|
width: 100px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-footer-icon-btns .uni-open-location-footer-icon-btns-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-footer-icon-btns .uni-open-location-footer-icon-btns-item .uni-open-location-footer-icon-box {
|
|
background-color: #f8f8f8;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-footer-icon-btns .uni-open-location-footer-icon-btns-item .uni-open-location-footer-icon-box .uni-open-location-icons {
|
|
color: #007aff;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-footer-icon-btns .uni-open-location-footer-icon-btns-item .uni-open-location-footer-btn-text {
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.uni-open-location .uni-open-location-footer-icon-btns .uni-open-location-footer-icon-btns-item:active {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.uni-open-location.uni-open-location-dark .uni-open-location-map-reset {
|
|
background-color: #111111;
|
|
}
|
|
|
|
.uni-open-location.uni-open-location-dark .uni-open-location-map-reset .uni-open-location-map-reset-icon {
|
|
color: #d1d1d1;
|
|
}
|
|
|
|
.uni-open-location.uni-open-location-dark .uni-open-location-footer {
|
|
background-color: #181818;
|
|
}
|
|
|
|
.uni-open-location.uni-open-location-dark .uni-open-location-footer .uni-open-location-name-text {
|
|
color: #fafafa;
|
|
}
|
|
|
|
.uni-open-location.uni-open-location-dark .uni-open-location-footer .uni-open-location-address-text {
|
|
color: #fafafa;
|
|
}
|
|
|
|
.uni-open-location.uni-open-location-dark .uni-open-location-footer-icon-btns .uni-open-location-footer-icon-btns-item .uni-open-location-footer-icon-box {
|
|
background-color: #393939;
|
|
}
|
|
|
|
.uni-open-location.uni-open-location-dark .uni-open-location-footer-icon-btns .uni-open-location-footer-icon-btns-item .uni-open-location-footer-btn-text {
|
|
color: #909090;
|
|
}
|
|
</style>
|