<template>
<view class="container">
<view class="content">
<map :scale="14" :show-location="true" :show-compass="true" class="map-content"
:latitude="position.latitude" :longitude="position.longitude" :markers="markers" @markertap="handleOpen"
@callouttap="handleOpen" />
<view class="map-btn" @click="handleOpen">開始導(dǎo)航</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
countryName:'',//地址名
position: {
latitude: '',
longitude: '',
name: '',
address: ''
},
}
},
components: {},
props: {},
computed: {
markers() {
const {
longitude,
latitude
} = this.position;
return [{
id: 0,
latitude, //緯度
longitude, //經(jīng)度
iconPath: '../../static/img/index/map.png', //顯示的圖標(biāo)
rotate: 0, // 旋轉(zhuǎn)度數(shù)
width: 28, //寬
height: 40, //高
title: '標(biāo)記位置', //標(biāo)注點(diǎn)名
alpha: 0.5, //透明度
callout: {
//自定義標(biāo)記點(diǎn)上方的氣泡窗口 點(diǎn)擊有效
content: this.position.name, //文本
padding: 10,
color: '#3D3D3D', //文字顏色
fontSize: "36rpx", //文本大小
borderRadius: 10, //邊框圓角
bgColor: '#fff', //背景顏色
display: 'ALWAYS', //常顯
}
}];
}
},

/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
console.log(options)
//此處暫時(shí)寫死，方便使用，按邏輯是從地址欄里獲取到的地址名稱
options.countryName = '天安門廣場'

this.countryName = options.countryName || ''
this.position.name = this.countryName
this.convert()//根據(jù)地址名稱獲取坐標(biāo)
},

/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function() {},

/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function() {

},

/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function() {},

/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function() {},

/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function() {},

/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function() {},
methods: {
// 根據(jù)地址名稱獲取坐標(biāo)
//（??！convert() 此方法是為了后臺(tái)沒有返回經(jīng)緯度坐標(biāo)時(shí)，前臺(tái)通過地址名稱自己獲取坐標(biāo)?。。?br> convert() {
// 新建一個(gè)正逆地址解析類
//?。。。。niApp調(diào)用騰訊地圖TMap的方法在下一篇有詳細(xì)講解！?。。。?！
let geocoder = new TMap.service.Geocoder();
// 將給定的地址轉(zhuǎn)換為坐標(biāo)位置
geocoder.getLocation({
address: this.countryName
}).then((result) => {
this.position.longitude = result.result.location.lng
this.position.latitude = result.result.location.lat
});
},
// 選擇地圖
handleOpen() {
let that = this
uni.showActionSheet({
itemList: ['高德地圖', '百度地圖', '騰訊地圖'],
success: function(res) {
that.guide(res.tapIndex)
},
fail: function(res) {
console.log(res.errMsg);
}
});
},
guide(signMap) {
uni.showLoading({
title: '跳轉(zhuǎn)中'
});
let {
position
} = this;
if (position.name && position.name != '') {
//地點(diǎn)位置position.name 地點(diǎn)經(jīng)緯度lng lat
var lng = position.longitude;
var lat = position.latitude;
if (signMap == 0) {
// 高德地圖
uni.getSystemInfo({
success: (res) => {
if (res.platform === "android") {
window.location.href =
"androidamap://viewMap?sourceApplication=appname&poiname=" + position
.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
//判斷是否跳轉(zhuǎn)
setTimeout(function() {
let hidden = window.document.hidden || window.document
.mozHidden || window.document.msHidden || window.document
.webkitHidden
if (typeof hidden == "undefined" || hidden == false) {
//調(diào)用高德地圖
window.location.href =
"https://uri.amap.com/marker?position=" + lng + "," +
lat + "&name=" + position.name;
}
}, 2000);
} else {
window.location.href =
"iosamap://viewMap?sourceApplication=appname&poiname=" + position
.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
//判斷是否跳轉(zhuǎn)
setTimeout(function() {
let hidden = window.document.hidden || window.document
.mozHidden || window.document.msHidden || window.document
.webkitHidden
if (typeof hidden == "undefined" || hidden == false) {
//調(diào)用高德地圖
window.location.href =
"https://uri.amap.com/marker?position=" + lng + "," +
lat + "&name=" + position.name;
}
}, 2000);
}
}
})
} else if (signMap == 1) {
// 百度地圖
uni.getSystemInfo({
success: (res) => {
if (res.platform === "android") {
let d = new Date();
let t0 = d.getTime();
window.location.href =
"androidamap://viewMap?sourceApplication=appname&poiname=" + position
.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
//由于打開需要1～2秒，利用這個(gè)時(shí)間差來處理－－打開app后，返回h5頁面會(huì)出現(xiàn)頁面變成app下載頁面，影響用戶體驗(yàn)
var delay = setInterval(function() {
var d = new Date();
var t1 = d.getTime();
if (t1 - t0 < 3000 && t1 - t0 > 2000) {
window.location.href =
"http://api.map.baidu.com/marker?location=" + lat +
"," + lng + "&title=" + position.name +
"&content=地點(diǎn)&output=html&src=webapp.baidu.openAPIdemo";
}
if (t1 - t0 >= 3000) {
clearInterval(delay);
}
}, 1000);
} else {
let d = new Date();
let t0 = d.getTime();
window.location.href =
"iosamap://viewMap?sourceApplication=appname&poiname=" + position
.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
//由于打開需要1～2秒，利用這個(gè)時(shí)間差來處理－－打開app后，返回h5頁面會(huì)出現(xiàn)頁面變成app下載頁面，影響用戶體驗(yàn)
let delay = setInterval(function() {
var d = new Date();
var t1 = d.getTime();
if (t1 - t0 < 3000 && t1 - t0 > 2000) {
window.location.href =
"http://api.map.baidu.com/marker?location=" + lat +
"," + lng + "&title=" + position.name +
"&content=地點(diǎn)&output=html&src=webapp.baidu.openAPIdemo";
}
if (t1 - t0 >= 3000) {
clearInterval(delay);
}
}, 1000);
}
}
})
} else {
// 騰訊地圖
uni.getSystemInfo({
success: (res) => {
if (res.platform === "android") {
window.location.href =
"androidamap://viewMap?sourceApplication=appname&poiname=" + position
.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
//判斷是否跳轉(zhuǎn)
setTimeout(function() {
let hidden = window.document.hidden || window.document
.mozHidden || window.document.msHidden || window.document
.webkitHidden
if (typeof hidden == "undefined" || hidden == false) {
//調(diào)用騰訊地圖
window.location.href =
`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
}
}, 2000);
} else {
window.location.href =
"iosamap://viewMap?sourceApplication=appname&poiname=" + position
.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
//判斷是否跳轉(zhuǎn)
setTimeout(function() {
let hidden = window.document.hidden || window.document
.mozHidden || window.document.msHidden || window.document
.webkitHidden
if (typeof hidden == "undefined" || hidden == false) {
//調(diào)用高德地圖
window.location.href =
`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
}
}, 2000);
}
}
})
}
} else {
uni.showToast({
title: '暫不知道該地點(diǎn)位置',
icon: 'none',
duration: 2000,
});
}
setTimeout(function() {
uni.hideLoading();
}, 2000);
},

}
}
</script>

<style>
.container {}

/* 內(nèi)容 */
.content {}

.map-content {
width: 100%;
height: calc(100vh - 80rpx);
}

.map-btn {
width: 710rpx;
height: 88rpx;
line-height: 88rpx;
border-radius: 60rpx;
background: #CE3B34;
color: #fff;
text-align: center;
position: fixed;
bottom: 24rpx;
left: 20rpx;
font-size: 32rpx;
}
</style>