1.map.nvue
<template>
<div class="content">
<!-- 标题栏 -->
<div class="tool-bar-fixed" ref="mapTop">
<div class="search_view">
<text class="city_text">{{city}}</text>
<text class="city_text uni-panel-icon uni-icon city_text_color"></text>
<!-- <image class="search_icon" src="../../static/search2.png"></image> -->
<input class="search_input" placeholder-class="search_inputp" placeholder="搜索位置(可拖动地图进行调整)"
:focus="showListView" @input="searchAddress" />
</div>
</div>
<!-- 地图 -->
<map id="map" ref="map" @regionchange="regionchange" :markers="markers" :controls="controls" :scale="scale"
:longitude="location.longitude" :latitude="location.latitude" :style="mapStyle">
<!-- 地图中心点标记 -->
<image class="cover_marker" src="../../static/position.png"
:style="{'left':mapWAH.width/2-10+'px','top':mapWAH.height/2-30+'px'}"></image>
<!-- 定位控件 -->
<image class="do_get_location" src="../../static/do_getLoction.png" @click="doCheckPermission"></image>
</map>
<!-- 底部下单 -->
<scroll-view :style="scrollStyle" :scroll-y="true">
<!-- 搜索出来的地址 -->
<view v-if="showListView" class="search_list_view">
<view v-for="(item,index) in addressList" :key="item.id" class="addres_item"
@click="chooseIs(index,item)">
<text class="text_name">{{item.name}}</text><br />
<text class="text_address">{{item.district+item.address}}</text>
<image class="choose_icon" v-if="addressIndex===index" src="../../static/choose.png"></image>
</view>
</view>
</scroll-view>
<view class="main_bottom" ref="mapBottom">
<view class="choose_address">
<!-- 搜索出来的地址 -->
<text class="add_text">{{addressText}}</text>
</view>
<text class="uni-btn-v">选择这里</text>
</view>
</div>
</template>
<script>
const dom = weex.requireModule('dom')
let mapSearch = weex.requireModule('mapSearch')
import permision from "@/common/permission.js"
var util = require('../../api/api.js')
var mapContext = null;
// import {
// inputtips
// } from '@/api/api.js' //输入提示功能
export default {
data() {
return {
iStatusBarHeight: 0,
scrollStyle: {
'width': '393px',
'height': '330px'
},
mapStyle: {
'width': '393px',
'height': '330px'
},
mapWAH: {
width: 0,
height: 0
},
city: '',
markers: [],
controls: [],
location: {},
addressText: "暂未定位成功，请稍候···",
addressList: [],
addressIndex: '',
addressItem: {},
showListView: false,
scale: 16
};
},
methods: {
//
searchAddressPoi(point) {
console.log("searchAddressPoi");
mapSearch.poiSearchNearBy({
point: point,
key: '',
radius: 2000
}, res => {
console.log(res);
this.addressList = res.poiList
this.showListView = true
// uni.showModal({
// content: JSON.stringify(res)
// })
})
},
// 搜索地址
searchAddress(e) {
console.log(e.detail.value);
mapSearch.poiSearchNearBy({
point: {
latitude: this.location.latitude,
longitude: this.location.longitude
},
key: e.detail.value,
radius: 2000
}, res => {
console.log(res);
this.addressList = res.poiList
this.showListView = true
// uni.showModal({
// content: JSON.stringify(res)
// })
})
// function(event) {
// console.log(e);
// console.log("------");
// console.log(event);
// that.addressText = event.address
// })
// inputtips({
// location: this.location.longitude + ',' + this.location.latitude,
// keywords: e.detail.value
// }).then(res => {
// this.addressList = res.data.tips
// this.showListView = true
// })
},
chooseIs(index, item) {
this.addressIndex = index
this.addressItem = item
var that = this
// 选择完成之后移动地图到指定位置
this.location = {
longitude: item.location.longitude,
latitude: item.location.latitude
}
this.addressText = item.province + item.city + item.district + item.name
},
regionchange(e) {
var that = this
if (e.type == "end") {
console.log(e.type)
uni.showLoading({
title: '请稍候···'
})
mapContext.getCenterLocation({
success: res => {
console.log("getCenterLocation " + res.latitude + " ==" + res.longitude);
that.getAddressText(res);
that.searchAddressPoi(res)
},
fail: err => {
console.log(err);
},
complete: res => {
console.log(res);
uni.hideLoading()
}
})
}
},
getAddressText(point) {
var that = this
plus.maps.Map.reverseGeocode(point, {}, function(event) {
console.log(event);
that.addressText = event.address +event.name
})
},
async doCheckPermission() {
uni.showLoading({
title: "定位中···"
})
let status = await this.checkPermission();
if (status !== 1) {
uni.showToast({
title: "访问位置被拒绝"
})
return;
}
this.doGetLocation();
},
doGetLocation() {
uni.getLocation({
//type: 'gcj02',
geocode: true,
success: (res) => {
this.hasLocation = true;
console.log("定位成功")
console.log(res)
var result = util.transformFromWGSToGCJ(res.latitude, res.longitude);
console.log(result); // [122.99395597, 44.99804071]
this.location = result;
this.getAddressText({
latitude: result.latitude,
longitude: result.longitude
})
// 定位成功 移动到中心点
mapContext.moveToLocation({
latitude: result.latitude,
longitude: result.longitude
})
var marker = {
latitude: res.latitude,
longitude: res.longitude,
iconPath: '../../static/my_location.png'
}
var markers = []
markers.push(marker)
this.markers = markers
uni.hideLoading()
},
fail: (err) => {
console.log(err)
uni.showModal({
content: err.errMsg
})
},
complete() {
uni.hideLoading()
}
})
},
async checkPermission() {
let status = permision.isIOS ? await permision.requestIOS('location') :
await permision.requestAndroid('android.permission.ACCESS_FINE_LOCATION');
if (status === null || status === 1) {
status = 1;
} else if (status === 2) {
uni.showModal({
content: "系统定位已关闭",
confirmText: "确定",
showCancel: false,
success: function(res) {}
})
} else if (status.code) {
uni.showModal({
content: status.message
})
} else {
uni.showModal({
title: "尊敬的修刻来用户",
content: "使用本APP需要定位权限，才能正常使用！",
confirmText: "去设置",
success: function(res) {
if (res.confirm) {
permision.gotoAppSetting();
} else {
plus.runtime.quit();
}
}
})
}
return status;
},
},
onLoad(e) {
//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight //标题栏顶部距离
this.doCheckPermission() //检查定位权限
mapContext = uni.createMapContext('map', this)
},
onShow() {
//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
},
onReady() {
var that = this
var mapStyle = this.mapStyle
var scrollStyle = this.scrollStyle
uni.getSystemInfo({
success: function(res) { // res - 各种参数
var winWidth = res.screenWidth
var winHeight = res.windowHeight
dom.getComponentRect(that.$refs.mapTop, option => {
var topHeight = option.size.height // 地图距顶部
dom.getComponentRect(that.$refs.mapBottom, option => {
var bottomHeight = option.size.height
var mapheight = (winHeight - topHeight - bottomHeight) / 2.5
mapStyle.height = mapheight + 'px'
mapStyle.width = winWidth + 'px'
mapStyle['margin-top'] = topHeight + 'px'
that.mapStyle = mapStyle
that.mapWAH.height = mapheight
that.mapWAH.width = winWidth
scrollStyle.width = winWidth + 'px'
scrollStyle.height = winHeight - topHeight - bottomHeight -
mapheight - 50
})
})
}
});
},
onHide() {
//监听页面隐藏
},
onUnload() {
//监听页面卸载
},
onPullDownRefresh() {
//监听用户下拉动作，一般用于下拉刷新
},
onReachBottom() {
//页面上拉触底事件的处理函数，一般用于上滑加载
}
/*
onResize 监听窗口尺寸变化
onTabItemTap 点击 tab 时触发，参数为Object
onShareAppMessage 用户点击右上角分享
onPageScroll 监听页面滚动，参数为Object
onNavigationBarButtonTap 监听原生标题栏按钮点击事件，参数为Object
onBackPress 监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack
onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件
*/
};
</script>
<style>
.content {
flex: 1;
}
/* 标题 */
.tool-bar-fixed {
background-color: #f98f34;
top: 0;
left: 0;
right: 0;
padding: 20upx 40upx;
}
.search_view {
flex-direction: row;
background-color: #FFFFFF;
border-radius: 10upx;
}
.search_input {
height: 50upx;
flex: 1;
line-height: 50upx;
font-size: 32upx;
}
.city_text_color {
color: #f98f34;
}
.city_text {
margin-left: 15upx;
margin-right: 10upx;
height: 50upx;
line-height: 50upx;
}
.search_inputp {
height: 50upx;
line-height: 50upx;
flex: 1;
font-size: 14wx;
}
.search_icon {
width: 70upx;
height: 40upx;
margin: 15upx;
}
/* 搜索列表 */
.search_list_view {
top: 1upx;
bottom: 0upx;
left: 0upx;
right: 0upx;
background-color: #FFFFFF;
}
.addres_item {
border-color: #F98F34;
border-bottom-width: 1upx;
padding: 10upx 40upx;
}
.text_name {
font-size: 25upx;
line-height: 25upx;
}
.text_address {
font-size: 20upx;
line-height: 25upx;
}
.choose_icon {
position: absolute;
top: 30upx;
right: 30upx;
width: 50upx;
height: 50upx;
}
/* 中心点 */
.cover_marker {
position: absolute;
width: 20px;
height: 20px;
}
/* 定位 */
.do_get_location {
position: absolute;
width: 40px;
height: 40px;
right: 20px;
bottom: 20px;
}
/* 底部下单 */
.main_bottom {
bottom: 0upx;
left: 0upx;
right: 0upx;
background-color: #FFFFFF;
height: 200rpx;
}
.choose_address {
margin: 20upx 40upx 20upx 40upx;
border-style: solid;
border-width: 1upx;
border-color: #ff0000;
border-radius: 5px;
padding: 10upx;
}
.add_text {
font-size: 25upx;
line-height: 35upx;
}
.uni-btn-v {
position: absolute;
left: 40upx;
right: 40upx;
bottom: 20upx;
background-color: #F98F34;
border-radius: 10upx;
height: 80upx;
line-height: 80upx;
font-size: 34upx;
color: #FFFFFF;
text-align: center;
}
/* .repair_type{height: 80upx;display: flex;justify-content:center;}
.repair_type_item{height: 80upx;line-height: 80upx;width: 200upx;font-size: 30upx;text-align: center;}
.activity{color: #F98F34;}
.choose_address{margin: 20upx 40upx 20upx 40upx;height: 80upx; width: calc(100% - 80upx); border-style:solid;border-width:1upx;border-color:#ff0000;border-radius:5px;}
.add_icon{width: 40upx;height: 40upx;margin: 20upx;float: left;}
.add_text{font-size: 32upx;line-height: 80upx;float: left;width: calc(100% - 80upx);}
.uni-btn-v{margin:20upx 40upx 20upx 40upx;background-color: #F98F34;border-radius: 10upx;height: 80upx;line-height: 80upx;font-size: 34upx;color: #FFFFFF;text-align: center;}*/
</style>
2. api.js wgs84和gcj02 坐标转化
/**
* 判断经纬度是否超出中国境内
*/
function isLocationOutOfChina(latitude, longitude) {
if (longitude < 72.004 || longitude > 137.8347 || latitude < 0.8293 || latitude > 55.8271)
return true;
return false;
}
/**
* 将WGS-84(国际标准)转为GCJ-02(火星坐标):
*/
function transformFromWGSToGCJ(latitude, longitude) {
var lat = "";
var lon = "";
var ee = 0.00669342162296594323;
var a = 6378245.0;
var pi = 3.14159265358979324;
if (isLocationOutOfChina(latitude, longitude)) {
lat = latitude;
lon = longitude;
}
else {
var adjustLat = transformLatWithXY(longitude - 105.0, latitude - 35.0);
var adjustLon = transformLonWithXY(longitude - 105.0, latitude - 35.0);
var radLat = latitude / 180.0 * pi;
var magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
var sqrtMagic = Math.sqrt(magic);
adjustLat = (adjustLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
adjustLon = (adjustLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
latitude = latitude + adjustLat;
longitude = longitude + adjustLon;
}
return { latitude: latitude, longitude: longitude };
}
/**
* 将GCJ-02(火星坐标)转为百度坐标:
*/
function transformFromGCJToBaidu(latitude, longitude) {
var pi = 3.14159265358979324 * 3000.0 / 180.0;
var z = Math.sqrt(longitude * longitude + latitude * latitude) + 0.00002 * Math.sin(latitude * pi);
var theta = Math.atan2(latitude, longitude) + 0.000003 * Math.cos(longitude * pi);
var a_latitude = (z * Math.sin(theta) + 0.006);
var a_longitude = (z * Math.cos(theta) + 0.0065);
return { latitude: a_latitude, longitude: a_longitude };
}
/**
* 将百度坐标转为GCJ-02(火星坐标):
*/
function transformFromBaiduToGCJ(latitude, longitude) {
var xPi = 3.14159265358979323846264338327950288 * 3000.0 / 180.0;
var x = longitude - 0.0065;
var y = latitude - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * xPi);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * xPi);
var a_latitude = z * Math.sin(theta);
var a_longitude = z * Math.cos(theta);
return { latitude: a_latitude, longitude: a_longitude };
}
/**
* 将GCJ-02(火星坐标)转为WGS-84:
*/
function transformFromGCJToWGS(latitude, longitude) {
var threshold = 0.00001;
// The boundary
var minLat = latitude - 0.5;
var maxLat = latitude + 0.5;
var minLng = longitude - 0.5;
var maxLng = longitude + 0.5;
var delta = 1;
var maxIteration = 30;
while (true) {
var leftBottom = transformFromWGSToGCJ(minLat, minLng);
var rightBottom = transformFromWGSToGCJ(minLat, maxLng);
var leftUp = transformFromWGSToGCJ(maxLat, minLng);
var midPoint = transformFromWGSToGCJ((minLat + maxLat) / 2, (minLng + maxLng) / 2);
delta = Math.abs(midPoint.latitude - latitude) + Math.abs(midPoint.longitude - longitude);
if (maxIteration-- <= 0 || delta <= threshold) {
return { latitude: (minLat + maxLat) / 2, longitude: (minLng + maxLng) / 2 };
}
if (isContains({ latitude: latitude, longitude: longitude }, leftBottom, midPoint)) {
maxLat = (minLat + maxLat) / 2;
maxLng = (minLng + maxLng) / 2;
}
else if (isContains({ latitude: latitude, longitude: longitude }, rightBottom, midPoint)) {
maxLat = (minLat + maxLat) / 2;
minLng = (minLng + maxLng) / 2;
}
else if (isContains({ latitude: latitude, longitude: longitude }, leftUp, midPoint)) {
minLat = (minLat + maxLat) / 2;
maxLng = (minLng + maxLng) / 2;
}
else {
minLat = (minLat + maxLat) / 2;
minLng = (minLng + maxLng) / 2;
}
}
}
function isContains(point, p1, p2) {
return (point.latitude >= Math.min(p1.latitude, p2.latitude) && point.latitude <= Math.max(p1.latitude, p2.latitude)) && (point.longitude >= Math.min(p1.longitude, p2.longitude) && point.longitude <= Math.max(p1.longitude, p2.longitude));
}
function transformLatWithXY(x, y) {
var pi = 3.14159265358979324;
var lat = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
lat += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
lat += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
lat += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
return lat;
}
function transformLonWithXY(x, y) {
var pi = 3.14159265358979324;
var lon = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
lon += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
lon += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
lon += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
return lon;
}
module.exports = {
isLocationOutOfChina: isLocationOutOfChina,
transformFromWGSToGCJ: transformFromWGSToGCJ,
transformFromGCJToBaidu: transformFromGCJToBaidu,
transformFromBaiduToGCJ: transformFromBaiduToGCJ,
transformFromGCJToWGS: transformFromGCJToWGS
}
3.permission
/// null = 未请求，1 = 已允许，0 = 拒绝|受限, 2 = 系统未开启
var isIOS
function album() {
var result = 0;
var PHPhotoLibrary = plus.ios.import("PHPhotoLibrary");
var authStatus = PHPhotoLibrary.authorizationStatus();
if (authStatus === 0) {
result = null;
} else if (authStatus == 3) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(PHPhotoLibrary);
return result;
}
function camera() {
var result = 0;
var AVCaptureDevice = plus.ios.import("AVCaptureDevice");
var authStatus = AVCaptureDevice.authorizationStatusForMediaType('vide');
if (authStatus === 0) {
result = null;
} else if (authStatus == 3) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(AVCaptureDevice);
return result;
}
function location() {
var result = 0;
var cllocationManger = plus.ios.import("CLLocationManager");
var enable = cllocationManger.locationServicesEnabled();
var status = cllocationManger.authorizationStatus();
if (!enable) {
result = 2;
} else if (status === 0) {
result = null;
} else if (status === 3 || status === 4) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(cllocationManger);
return result;
}
function push() {
var result = 0;
var UIApplication = plus.ios.import("UIApplication");
var app = UIApplication.sharedApplication();
var enabledTypes = 0;
if (app.currentUserNotificationSettings) {
var settings = app.currentUserNotificationSettings();
enabledTypes = settings.plusGetAttribute("types");
if (enabledTypes == 0) {
result = 0;
console.log("推送权限没有开启");
} else {
result = 1;
console.log("已经开启推送功能!")
}
plus.ios.deleteObject(settings);
} else {
enabledTypes = app.enabledRemoteNotificationTypes();
if (enabledTypes == 0) {
result = 3;
console.log("推送权限没有开启!");
} else {
result = 4;
console.log("已经开启推送功能!")
}
}
plus.ios.deleteObject(app);
plus.ios.deleteObject(UIApplication);
return result;
}
function contact() {
var result = 0;
var CNContactStore = plus.ios.import("CNContactStore");
var cnAuthStatus = CNContactStore.authorizationStatusForEntityType(0);
if (cnAuthStatus === 0) {
result = null;
} else if (cnAuthStatus == 3) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(CNContactStore);
return result;
}
function record() {
var result = null;
var avaudiosession = plus.ios.import("AVAudioSession");
var avaudio = avaudiosession.sharedInstance();
var status = avaudio.recordPermission();
console.log("permissionStatus:" + status);
if (status === 1970168948) {
result = null;
} else if (status === 1735552628) {
result = 1;
} else {
result = 0;
}
plus.ios.deleteObject(avaudiosession);
return result;
}
function calendar() {
var result = null;
var EKEventStore = plus.ios.import("EKEventStore");
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(0);
if (ekAuthStatus == 3) {
result = 1;
console.log("日历权限已经开启");
} else {
console.log("日历权限没有开启");
}
plus.ios.deleteObject(EKEventStore);
return result;
}
function memo() {
var result = null;
var EKEventStore = plus.ios.import("EKEventStore");
var ekAuthStatus = EKEventStore.authorizationStatusForEntityType(1);
if (ekAuthStatus == 3) {
result = 1;
console.log("备忘录权限已经开启");
} else {
console.log("备忘录权限没有开启");
}
plus.ios.deleteObject(EKEventStore);
return result;
}
function requestIOS(permissionID) {
return new Promise((resolve, reject) => {
switch (permissionID) {
case "push":
resolve(push());
break;
case "location":
resolve(location());
break;
case "record":
resolve(record());
break;
case "camera":
resolve(camera());
break;
case "album":
resolve(album());
break;
case "contact":
resolve(contact());
break;
case "calendar":
resolve(calendar());
break;
case "memo":
resolve(memo());
break;
default:
resolve(0);
break;
}
});
}
function requestAndroid(permissionID) {
return new Promise((resolve, reject) => {
plus.android.requestPermissions(
[permissionID],
function(resultObj) {
var result = 0;
for (var i = 0; i < resultObj.granted.length; i++) {
var grantedPermission = resultObj.granted[i];
console.log('已获取的权限：' + grantedPermission);
result = 1
}
for (var i = 0; i < resultObj.deniedPresent.length; i++) {
var deniedPresentPermission = resultObj.deniedPresent[i];
console.log('拒绝本次申请的权限：' + deniedPresentPermission);
result = 0
}
for (var i = 0; i < resultObj.deniedAlways.length; i++) {
var deniedAlwaysPermission = resultObj.deniedAlways[i];
console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
result = -1
}
resolve(result);
},
function(error) {
console.log('result error: ' + error.message)
resolve({
code: error.code,
message: error.message
});
}
);
});
}
function gotoAppPermissionSetting() {
if (permission.isIOS) {
var UIApplication = plus.ios.import("UIApplication");
var application2 = UIApplication.sharedApplication();
var NSURL2 = plus.ios.import("NSURL");
var setting2 = NSURL2.URLWithString("app-settings:");
application2.openURL(setting2);
plus.ios.deleteObject(setting2);
plus.ios.deleteObject(NSURL2);
plus.ios.deleteObject(application2);
} else {
var Intent = plus.android.importClass("android.content.Intent");
var Settings = plus.android.importClass("android.provider.Settings");
var Uri = plus.android.importClass("android.net.Uri");
var mainActivity = plus.android.runtimeMainActivity();
var intent = new Intent();
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
intent.setData(uri);
mainActivity.startActivity(intent);
}
}
const permission = {
get isIOS(){
return typeof isIOS === 'boolean' ? isIOS : (isIOS = uni.getSystemInfoSync().platform === 'ios')
},
requestIOS: requestIOS,
requestAndroid: requestAndroid,
gotoAppSetting: gotoAppPermissionSetting
}
export default permission
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
