template-project/jsFile/map/yaya-map.js

190 lines
4.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

const tools = require('../tools.js')
// 解决微信小程序
var QQMapWX = require('./qqmap-wx-jssdk.min.js');
// 腾讯地图
var qqmapsdk = new QQMapWX({
key: 'QNHBZ-55RKF-OMFJJ-NPU7O-EPSDH-ACBAA'
});
// 解决H5跨域
const jsonp = function(url, data) {
return new Promise((resolve, reject) => {
// 1.初始化url
let dataString = url.indexOf('?') === -1 ? '?' : '&'
let callbackName = `jsonpCB_${ Date.now() }`;
url += `${ dataString }callback=${ callbackName }`
if(data) {
// 2.有请求参数依次添加到url
for(let k in data) {
url += `&${ k }=${ data[k] }`
}
}
let scriptNode = document.createElement('script');
scriptNode.src = url;
// 3. callback
window[callbackName] = (result) => {
result ? resolve(result) : reject('没有返回数据');
delete window[callbackName];
document.body.removeChild(scriptNode);
}
// 4. 异常情况
scriptNode.addEventListener('error', () => {
reject('接口返回数据失败');
delete window[callbackName];
document.body.removeChild(scriptNode);
}, false)
// 5. 开始请求
document.body.appendChild(scriptNode)
})
}
const yayaMap = {
// 平台判断
platformEv(){
// #ifdef APP-PLUS
this.getAddress();
// #endif
// #ifdef MP-WEIXIN
this.getAddressWx();
// #endif
// #ifdef H5
this.getAddressH5();
// #endif
},
/**
* @description app获取经纬度和详细地址方法
*/
getAddress(){
uni.getLocation({
type: 'gcj02',
geocode:true,
success: (res)=> {
// console.log(res,'地址信息');
let params = {
latitude:res.latitude,
longitude:res.longitude,
address:`${res.address.province}${res.address.city}${res.address.district || ''}${res.address.street || ''}${res.address.streetNum || ''}${res.address.poiName || ''}`
}
console.log(params,'APP');
}
});
},
/**
* @description 微信获取经纬度和详细地址方法
*/
getAddressWx(){
uni.getLocation({
type: 'gcj02',
geocode:true,
success: (res)=> {
// console.log(res,'地址信息');
qqmapsdk.reverseGeocoder({
location: {latitude: res.latitude, longitude: res.longitude},
success:(res)=> {
// console.log(res,'WX');
let params = {
latitude:res.result.location.lat,
longitude:res.result.location.lng,
address:`${res.result.address}`
}
console.log(params,'WX');
},
fail(err) {
console.log(err)
}
})
}
});
},
/**
* @description H5获取经纬度和详细地址方法
*/
getAddressH5(){
uni.showLoading({
title: '定位中...',
mask:true
});
uni.getLocation({
type: 'gcj02', // wgs84 gcj02
altitude: true,
// geocode: true, // wgs84
success: (res)=> {
let str = `output=jsonp&key=QNHBZ-55RKF-OMFJJ-NPU7O-EPSDH-ACBAA&location=${res.latitude},${res.longitude}`
jsonp('https://apis.map.qq.com/ws/geocoder/v1/?'+str,{}).then(res=>{
// console.log(res,'H5');
uni.hideLoading();
if(res.status == 0){
// that.locationName = res.result.address; //当前定位
let params = {
latitude:res.result.location.lat,
longitude:res.result.location.lng,
address:`${res.result.address}`
}
console.log(params,'H5');
}
})
}
});
},
/**
* @description 打开地图导航
*/
openLocation(latitude,longitude,name,address){
uni.openLocation({
latitude: parseFloat(latitude),
longitude: parseFloat(longitude),
name:name,
address:address,
success: function () {
console.log('success');
},
fail:function(err){
console.log(err)
}
});
},
/**
* @description 传入目的地的经纬度、地点名称、详细地址,打开地图导航到达目的地
*/
goFlag:true,
goThere(latitude=30.656693,longitude=104.136425,name="大向天诚有限责任公司",address="四川省成都市成华区双店路B口"){
if(this.goFlag){
this.goFlag = false;
// #ifdef MP-WEIXIN
wx.getLocation({//获取当前经纬度
type: 'wgs84', //返回可以用于wx.openLocation的经纬度官方提示bug: iOS 6.3.30 type 参数不生效,只会返回 wgs84 类型的坐标信息
success: (res)=> {
wx.openLocation({//​使用微信内置地图查看位置。
latitude: parseFloat(latitude),//要去的纬度-地址
longitude: parseFloat(longitude),//要去的经度-地址
name: name,
address: address,
fail:err=>{
tools.showToast('地址信息错误');
}
})
}
})
// #endif
// #ifdef APP-PLUS || H5
uni.openLocation({
latitude: parseFloat(latitude),
longitude: parseFloat(longitude),
name:name,
address:address,
success:()=> {
console.log('success');
},
fail:err=>{
console.log(err)
}
});
// #endif
setTimeout(()=>{
this.goFlag = true;
},2000)
} else {
tools.showToast('请勿多次点击');
}
}
}
export default yayaMap;